Avoid DOM operation if applying an empty className

[stanleyxu2005]

Short version:

I noticed after image is loaded, vanilla-lazyload will automatically add a class loaded.

In my case is not needed (see the details in Long version section below). I'd like to avoid calling addClass and removeClass for a style not defined. It might not have any performance difference (my case I have 200 images in page and viewport can show 30 images) but who knows. The simple PR is about to check and avoid unnecessary DOM operation.

Long version:

I see vanilla-lazyload is recommended in web.dev when I was troubleshooting why native image lazy loading is not working even in modern browsers (issue 4273). My case works in Chrome 109, but does not work in newer browsers (e.g. Chrome 120-123, Edge 122). web.dev explains that developer needs to specify width and height, and native lazy loading might behave differently or even not working in the you expect.

I think I have to use a JS based solution to fix this either implementing IntersectionObserver myself or using vanilla-lazyload. I choose the second and that's why I share this feedback.

I'm using Vue and I have already a wrapper component <LazyImage> it wraps img element like this

<img :src=imageSrc loading="lazy" :class="{ease: true, easeLoaded: loaded}" @load="loaded=true">

By using vanilla-lazyload, I want to keep changes minimal. so I only rename src to datasrc, and remain the rest unchanged.

And then I initialize the lozyload like this

document.lazyLoadInstance = new LazyLoad({
  elements_selector: '[loading=lazy]', // no need to add class "lazy" to img
  class_applied: "",
  class_loading: "",
  class_loaded: "",
  // class_error: "error", // keep it
  class_entered: "",
  class_exited: "",
))

As you can see, if class_* is empty, it'll be great to skip any DOM operation.

wdyt?

Thanks

[verlok]

Thanks for the PR, I completely agree with you and find the purpose very useful for performance improvement.

[verlok]

I won't merge it to master because the release process on NPM goes through different steps, I use GitFlow. Can you make a PR towards a new branch named, e.g. feature/avoid-class-add-remove-if-not-necessary?

If you can't, I will do it (but then your name won't show up in the contributors of this library).

[stanleyxu2005]

Sure. New PR is created #606
I'm not sure how to add test case for that. so it's just change the source and dist files

[inglesuniversal]

That is in deed a very good improvement. Thank you both for your awesome discoveries!

[verlok]

While I was at it, I took the chance to clean up the code from Internet Explorer specific checks, and released version 18.0.0 which is smaller, but it doesn't support IE11 anymore.

[verlok]

If you’re happy with my support, the documentation and the effort I’ve been putting on this project in the latest years, I hope you might want to buy me a coffee to show your appreciation. Or sponsor me, if you're a fan.

Open-source software is great for everyone, but it takes passion and time (and coffee!) to grow and evolve.

Thank you for thinking about it.
Have a wonderful day!