images class attribute is lost about yall.js HOT 6 CLOSED

For the relevant section, I think this is closer to what you want: https://github.com/malchata/yall.js/blob/master/dist/yall-2.0.1.min.js

I need to perform more testing before I push this into a release, but if this fix works for you, feel free to use it. Just be aware that it has not been widely tested across browsers yet!

from yall.js.

So, I wrote a comment at first and thought it was a bug with my script, but it may be your app design. The default class for lazy loading is lazy. When images are loaded, the lazy class is removed with this line in yall.js:

lazyElement.classList.remove(options.lazyClass);

I would recommend against styling the lazy class, and instead offload that styling to another class. classList.remove shouldn't drop the entire class attribute, only the specified class.

That said, can you link me to someplace where this code is running so I can see what's happening?

from yall.js.

I've just made a simple and 'temp' fix in a fork here

'https://github.com/xanisu/yall.js/blob/addAttributes/src/yall.js'

The problem is that class attr is complete removed.

Take a look at that example at codepen.io, I've just copied yall raw code:

https://codepen.io/xanisu/pen/odaGgX

Please, note that final image should have it's style 'object-fit:contain' in order to be correctly displayed.

from yall.js.

Ah, I understand the problem now!

While your fix addresses your specific situation, I think looping over the attributes present on the original element is probably best to avoid issues with dropping other necessary attributes. We also don't want to drop width and height indiscriminately because some may rely on those attributes to prevent layout shifting.

I won't be merging the temp fix, but it does help me to find a solution that will cover more use cases. I'll notify here when I have a fix that works, and you can give it a try when I have it. :)

Thanks for this!

from yall.js.

Works like a charm!

Thanks for sharing this mate.

from yall.js.

No sweat! I'm going to keep this issue open in the meantime while I test. When I release version 2.0.1, I'll close this and tag you so you can get the official release.

from yall.js.