Github url

lazyload

by tuupola

tuupola /lazyload

Vanilla JavaScript plugin for lazyloading images

8.4K Stars 2.3K Forks Last release: over 4 years ago (1.9.7) MIT License 41 Commits 22 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Lazy Load Remastered

Lazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading.

This is a modern vanilla JavaScript version of the original Lazy Load plugin. It uses Intersection Observer API to observe when the image enters the browsers viewport. Original code was inspired by YUI ImageLoader utility by Matt Mlinac. New version loans heavily from a blog post by Dean Hume.

Basic Usage

By default Lazy Load assumes the URL of the original high resolution image can be found in

data-src

attribute. You can also include an optional low resolution placeholder in the

src

attribute.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lazyload.js"></script> ![]() ![](https://github.com/tuupola/lazyload/raw/master/img/example-thumb.jpg)

With the HTML in place you can then initialize the plugin using the factory method. If you do not pass any settings or image elements it will lazyload all images with class

lazyload

.

lazyload();

If you prefer you can explicitly pass the image elements to the factory. Use this for example if you use different class name.

let images = document.querySelectorAll(".branwdo"); lazyload(images);

If you prefer you can also use the plain old constructor.

let images = document.querySelectorAll(".branwdo"); new LazyLoad(images);

The core IntersectionObserver can be configured by passing an additional argument

new LazyLoad(images, { root: null, rootMargin: "0px", threshold: 0 });

Additional API

To use the additional API you need to assign the plugin instance to a variable.

let lazy = lazyload();

To force loading of all images use

loadimages()

.

lazy-\>loadImages();

To destroy the plugin and stop lazyloading use

destroy()

.

lazy-\>destroy();

Note that

destroy()

does not load the out of viewport images. If you also want to load the images use

loadAndDestroy()

.

lazy-\>loadAndDestroy();

Additional API is not avalaible with the jQuery wrapper.

jQuery Wrapper

If you use jQuery there is a wrapper which you can use with the familiar old syntax. Note that to provide BC it uses

data-original

by default. This should be a drop in replacement for the previous version of the plugin.

![]() ![](https://github.com/tuupola/lazyload/raw/master/img/example-thumb.jpg)
$("img.lazyload").lazyload();

Cookbook

Blur Up Images

Low resolution placeholder ie. the "blur up" technique. You can see this in action in this blog entry. Scroll down to see blur up images.

![](https://github.com/tuupola/lazyload/raw/master/thumbnail.jpg)

Responsive Images

Lazyloaded Responsive images are supported via

data-srcset

. If browser does not support

srcset

and there is no polyfill the image from

data-src

will be shown.

![](https://github.com/tuupola/lazyload/raw/master/thumbnail.jpg)
![](https://github.com/tuupola/lazyload/raw/master/thumbnail.jpg)

Inlined Placeholder Image

To reduce the amount of request you can use data uri images as the placeholder.

![](data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=)

Install

This is still work in progress. You can install beta version with yarn or npm.

$ yarn add lazyload $ npm install lazyload

License

All code licensed under the MIT License. All images licensed under Creative Commons Attribution 3.0 Unported License. In other words you are basically free to do whatever you want. Just don't remove my name from the source.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.