Discussion on: How to lazy load images in html with pure Javascript?

Transpilers will indeed resolve this, but not all users will be using transpilers who are reading these blog posts.

Nothing wrong with just writing it as a basic for-loop though, then it's completely vanilla and users can simply copy pasted it.

I took the opportunity to improve the code to:

document.addEventListener('DOMContentLoaded', function () {
    var lazyloadThrottleTimeout;

    function lazyload() {
        if (lazyloadThrottleTimeout) {
            clearTimeout(lazyloadThrottleTimeout);
        }

        var lazyloadImages = document.getElementsByClassName('lazy');
        if (lazyloadImages.length < 1) {
            return;
        }

        lazyloadThrottleTimeout = setTimeout(function () {
            var scrollTop = window.pageYOffset;
            for (var i = 0; i < lazyloadImages.length; i++) {
                if (lazyloadImages[i].offsetTop < window.innerHeight + scrollTop) {
                    lazyloadImages[i].src = lazyloadImages[i].dataset.src;
                    lazyloadImages[i].classList.remove('lazy');
                }
            }
        }, 20);
    }

    document.addEventListener('scroll', lazyload);
    window.addEventListener('resize', lazyload);
    window.addEventListener('orientationChange', lazyload);
});

• I've added a basic for-loop instead of the forEach.
• Reselected the Lazy Loading images each time the event occurs. This way it's more performant and can't break less. You have to know that sometimes other scripts will remove one of these images and then your script will throw an error. OR if you have inserted new images which should lazy load a reselect of the images would improve that.
• I would suggest you don't remove the eventlisteners at all if you'd like to load newly added images. The removal of these listeners in the current script didn't work anyway because the array doesn't remove the images that are already lazy loaded :-)
• As you can see the throttle is not needed if your array is empty so I have early returned the function so no unnecessary timeout have to run.

That being all said, I still recommend using loading="lazy" for the sake of compatibility ✌️