DownloadLazyLoad is a fast, lightweight and flexible script that speeds up your web application by loading images only as they enter the viewport. LazyLoad supports responsive images. LazyLoad is a lightweight (2.4 kB) and flexible script that speeds up your web application by deferring the loading of your below-the-fold images, animated SVGs, videos and iframes to when they will enter the viewport. It’s written in plain “vanilla” JavaScript, it leverages the IntersectionObserver API, it supports responsive images, it optimizes your website for slower connections, and can enable native lazy loading. To display content images on your pages, always use the img tag. This would benefit the SEO and the accessibility of your website. To understand if your images are content or background, ask yourself: “would my website user like to see those images when printing out the page?”. If the answer is “yes”, then your images are content images and you should avoid using background images to display them.
Features
- Optimizes performance by cancelling downloads of images that already exited the viewport
- Retries loading after network connection went off and on again
- Supports conditional usage of native lazyloading
- Works with your DOM, your own classes and data-attributes
- Can lazyload responsive images
- Can lazily execute code, when given elements enter the viewport
Project Samples
