Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

enableAutoReload for background images #272

Open
malkomich opened this issue Aug 19, 2021 · 2 comments
Open

enableAutoReload for background images #272

malkomich opened this issue Aug 19, 2021 · 2 comments

Comments

@malkomich
Copy link

I am not able to get my images reloaded, enabling the parameter enableAutoReload , while using the data-background-image to provide the image source.

Expected Behavior

The background image should be updated for the observed element.

Current Behavior

The element keeps with the same background image, and the observer is not triggering the update.

Steps to Reproduce (for bugs)

Following are the relevant parts of the component I am working on:
TEMPLATE:

<v-card class="lozad ..." :data-background-image="src" />

SCRIPT:

props: {
  src: {
    type: String,
    required: true,
  },
mounted() {
  this.observer = lozad('.lozad', { enableAutoReload: true })
  this.observer.observe()
},

Context

I am trying to build a gallery for a hybrid application with Nuxt (Vue), in which I have an album selector. When I change that selector, the images should change to the ones stored in the new album selected.

Tested on:

  • Browser Name and version: Google Chrome Version 92.0.4515.131 (Official Build) (64-bit)
  • Operating System and version (desktop or mobile): Windows 10 Home Version 20H2
  • Framework & Version: Vue 2.6.14
@Hemanth-M-K
Copy link

any update on this issue? or any solution for this issue?

@jiangts
Copy link

jiangts commented Dec 24, 2022

Was stumped by this briefly: it's because lozad doesn't reload any elements with the data-loaded=true attribute. If you delete that attribute it will reload the background image.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants