Image lazy load does not work properly for lightbox when imgs prop change

[ashenwolf]

Steps to reproduce:

1. Make a gallery with few images (that us assign imgs prop). Let's call it set 1

2. Open few images in a lightbox to force lazy load few images

3. Reassign a different set of images (set 2)

4. Open the lightbox. The images previously opened from on step 2, open in lightbox instead of the images from current set 2. The images that were not opened in lighbox on step 2 are loaded ok. The images thumbnails at the bottom are correct, however (i.e. contain only images from set 2, no images from set 1). The actual img tags looks like following:

   <img data-src="http://new-correct-url/" class="image animated lazyloaded" src="http://old-bad-url/">

As a quick fix option maybe just enable/disable lazyness via a prop?

vue-images version 1.0.9 is used

Apart from this, the component is pretty cool. Thanks!

[vesper8]

am having a very similar problem

am changing the contents of images using ajax and the thumbnails images are never in sync after changing the data. the images do change but they lag behind.. ie they show thumbs/images from the previous load

I could go into more detail.. but I think both I and the OP need the same thing.. a way to disable lazy loading or a way to force a refresh/redraw of some sort.

any advice please?

[vesper8]

@ashenwolf did you figure out a workaround to make this work when changing the images prop dynamically?

@littlewin-wang could you comment on this please? we would love for a way to a) disable lazyloading and/or b) force the component to re-render / re-initialize so it can properly display images/thumbs after changing the images prop through an ajax call

[vesper8]

Well this bug was really hurting me so dug in and found the solution. Turns out this is a known issue of the lazysizes library which is used in this library

aFarkas/lazysizes#367
aFarkas/lazysizes#354
aFarkas/lazysizes#343

After trying many ways to fix the problem, I followed the advice of the creator of lazysizes and added the "attribute change" plugin https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/attrchange

I added the one from the 3.0 release since this is what is used in this library.

In order to make it work I added this BEFORE the app.js (which includes all the vue stuff)

window.lazySizesConfig = window.lazySizesConfig || {
      init: false,
    };

then I load the app.js

then I load the plugin

and then finally I initialize

lazySizes.init();

So the bottom of my page looks like this

    <!-- JavaScript -->
    <script src="{{ asset('/js/app_config.js') }}"></script>
    <script src="{{ mix('dist/js/app.js') }}"></script>
    <script src="{{ asset('/js/ls.attrchange.min.js') }}"></script>
    <script src="{{ asset('/js/app_init.js') }}"></script>

and voila problem solved

To @littlewin-wang, you could include the plugin by default, it's super tiny and probably a good idea since this problem affects all js frameworks that can change the data-attr dynamically