simonfrey/lazysimon

Minimal effort 350 byte JavaScript library to lazy load all <img> on your website

lazysimon's Issues

Fundamentally Broken

Hey Simon, I saw you post your library via a tweet on an announcement that native lazy loading was being merged into the HTML spec (https://mobile.twitter.com/eu_frey/status/1227668003556335618). I was excited to see the size of your code so I looked around at it a bit. I hate to be the one to say this but I think there is a fundamental issue with the code that means it can never work.

As a practical proof you can see that all the images are being downloaded: https://www.webpagetest.org/result/200213_B4_83810bbf14161dbdedeea5c693698b25/

That's because even if you put your script inline in the header, the DOM will start downloading every image with a resolvable URL as soon as it sees it when it's parsing the page from top to bottom. And your Javascript can't touch that new DOM element until it has been parsed, which at that point it's too late to prevent the image from being downloaded. https://stackoverflow.com/a/22159928

That's why loading="lazy" has to be on the image at page load, and not added after the fact with Javascript. The way other lazy loading libraries have gotten around this is to have the image URLs be empty or use a shared placeholder across all lazy loaded images. Then after the DOM is parsed, the Lazy Load Javascript executes and replaces the image URLs with the resolvable ones. Here's an older lazy loading library that serves as a good example: http://dinbror.dk/blazy/examples/?ref=github