alterebro/img-lazy-loading.md

Created March 10, 2019 16:27

Star (0) You must be signed in to star a gist
Fork (0) You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/alterebro/ebe7ccceee84265cdbfa0bbbe3733e0e.js"></script>
Save alterebro/ebe7ccceee84265cdbfa0bbbe3733e0e to your computer and use it in GitHub Desktop.

Download ZIP

Raw

img-lazy-loading.md

Image lazy loading stuff

IntersectionObserver
- Intersection Observer API : https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
- Polyfill : https://github.com/w3c/IntersectionObserver/tree/master/polyfill
- Sample : https://googlechrome.github.io/samples/intersectionobserver/
Five Techniques to Lazy Load Images for Website Performance: https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/
How to Build Your Own Progressive Image Loader (default blured image): https://www.sitepoint.com/how-to-build-your-own-progressive-image-loader/
progressive-image.js (above technique) https://github.com/craigbuckler/progressive-image.js , https://codepen.io/craigbuckler/pen/yPqLXW
Another approach using onscroll event and checking against viewport https://codepen.io/rposbo/pen/ONmgVG?editors=1000

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment