images class attribute is lost

[xanisu]

Once yall has executed, my images are losing it's class property and a width and height attribute is forced to appear.

That fails with my needs, because I'm using that image class to use it as object-fit:'cover' in it's className.

[malchata]

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?

[xanisu]

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.

[malchata]

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!

[malchata]

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!

[xanisu]

Works like a charm!

Thanks for sharing this mate.

[malchata]

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.