Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/verlok/lazyload

LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.
https://github.com/verlok/lazyload

hacktoberfest iframes images intersectionobserver lazy-loading lazy-sizes lazyload lazyload-iframes lazyload-images lazyload-script lazyload-videos picture picture-tag responsive-images srcset srcset-sizes vanilla-javascript vanilla-js videos webp

Last synced: 3 months ago
JSON representation

LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.

Awesome Lists containing this project

README 

        
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](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) API, it supports [responsive images](https://alistapart.com/article/responsive-images-in-practice), it optimizes your website for slower connections, and can enable native lazy loading. See [all features](#-all-features-compared) for more.



[![vanilla-lazyload (latest)](https://img.shields.io/npm/v/vanilla-lazyload/latest.svg)](https://www.npmjs.com/package/vanilla-lazyload)

[![vanilla-lazyload (downloads)](https://img.shields.io/npm/dy/vanilla-lazyload.svg)](https://www.npmjs.com/package/vanilla-lazyload)

[![](https://data.jsdelivr.com/v1/package/npm/vanilla-lazyload/badge)](https://www.jsdelivr.com/package/npm/vanilla-lazyload)

[![](https://github.com/verlok/vanilla-lazyload/actions/workflows/ci.yml/badge.svg)](https://github.com/verlok/vanilla-lazyload/actions/workflows/ci.yml)



➡️ Jump to: [👨‍💻 Getting started - HTML](#-getting-started---html) - [👩‍💻 Getting started - Script](#-getting-started---script) - [🥧 Recipes](#-recipes) - [📺 Demos](#-demos) - [😋 Tips & tricks](#-tips--tricks) - [🔌 API](#-api) - [😯 All features compared](#-all-features-compared)



---



**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**



---



## 👨‍💻 Getting started - HTML



In order to make your content be loaded by LazyLoad, you must use some `data-` attributes instead of the actual attributes. Examples below.



### Lazy image:



```html

A lazy image

```



### Lazy image with low quality placeholder:



```html

A lazy image

```



### Lazy responsive image with `srcset` and `sizes`:



```html

A lazy image

```



To have a low quality placeholder, add the `src` attribute pointing to a very small version of the image. E.g. `src="lazy_10.jpg"`.



### Lazy responsive image with hi-dpi support using the `picture` tag:



```html



  

  

  A lazy image



```



To have a low quality placeholder, add the `src` attribute pointing to a very small version of the image to the `img` tag. E.g. `src="lazy_10.jpg"`.



### Lazy responsive image with automatic _WebP_ format selection, using the `picture` tag:



```html



  

  A lazy image



```



To have a low quality placeholder, add the `src` attribute pointing to a very small version of the image to the `img` tag. E.g. `src="lazy_10.jpg"`.



### Lazy background image



⚠ **IMPORTANT NOTE**: 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.



#### Single background image:



```html



```



#### Single background, with HiDPI screen support:



```html



```



#### Multiple backgrounds:



```html



  ...



```



#### Multiple backgrounds, HiDPI screen support:



```html



  ...



```



#### Backgrounds with `image-set`:



```html

...


```



#### Multiple backgrounds with `image-set`:



```html



  ...



```



### Lazy animated SVG



```html



```



### Lazy video



```html



  

  

  



```



Please note that the video poster can be lazily loaded too.



### Lazy iframe



```html



```



---



**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**



---



## 👩‍💻 Getting started - Script



The latest, recommended version of LazyLoad is **19.1.3**.

Note that if you need to support Internet Explorer 11, you need to use version 17.9.0 or below.



Quickly understand how to upgrade from a previous version reading the [practical upgrade guide](UPGRADE.md).



### The simple, easiest way



The easiest way to use LazyLoad is to include the script from a CDN.



```html



```



OR, if you prefer to import it as an ES module:



```html



  import LazyLoad from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";



```



Then, in your javascript code:



```js

var lazyLoadInstance = new LazyLoad({

  // Your custom settings go here

});

```



To be sure that DOM for your lazy content is ready when you instantiate LazyLoad, **place the script tag right before the closing `