Lazysizes: Strange random bug with dynamic images and vue.js

[maximelebreton]

Hello @aFarkas

My scenario is really simple:

• 3 cases : mobile, tablet & desktop (they are just names)
• 2 images per case 1x & 2x managed by srcset
• if you press a the mobile button, it should appear a 320x480 image if you're on a 1x screen, and 640x960 for a 2x. (same for tablet and desktop with the corresponding sizes)

But on initialisation, sometimes it's working, and sometimes not... (the data-srcset attr is updated, but the srcset attr stuck on the first image selected
Really dont know why this randomness...

Test case: https://jsbin.com/lehidubexo/edit?console,output

In this example video of 8 attempts:

• 1, 2 & 3 doesn't work
  
  
  
  • 4, 5, 6 & 7 works
  
  
  • 8 doesn't work again
  
  

Thank you for your help!

Tested on Chrome 55.0, vue.js 2.1.8, lazySizes 2.0.7

[aFarkas]

You probably also need the attrchange plugin (https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/attrchange).

I won't have time until friday/sunday to check this.

[maximelebreton]

Damn, that's it!

The documentation is confusing because of this (so I didn't look at the plugins):

lazysizes also detects new elements in the DOM automatically

It might be useful to clarify?

Anyway, thanks for the great work!

[aFarkas]

lazysizes does detect new elements in the dom. But it does not detect the re-use of existing DOM elements, if only the data-src/data-srcset is changed. In these cases the class has to be re-added. This is something very special to the new dom diffing/morphing libs.

[maximelebreton]

Thanks.
I think this subtle clarification would be very useful in the documentation.