simonfrey / lazysimon Goto Github PK
View Code? Open in Web Editor NEWMinimal effort 350 byte JavaScript library to lazy load all <img> on your website
Home Page: https://lazy.simon-frey.eu
License: MIT License
Minimal effort 350 byte JavaScript library to lazy load all <img> on your website
Home Page: https://lazy.simon-frey.eu
License: MIT License
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.