Images Lazy Load

Lazy Load delays loading of images on page while they are outside of viewport until user scrolls to them.

It will make the page load faster, improve scrolling performance and also save traffic.

Usage

For Images <img>

To use lazy load on images:

1. specify image source into data-src attribute instead of src attribute
2. add lazy class to image

<div class="page-content">
    ...
    <img data-src="path/to/image.jpg" class="lazy">
    ...
</div>

For Background Images

It is also possible to use lazy load for background images, in this case:

1. specify element's background image source into data-background
2. add lazy class to element

<div class="page-content">
    ...
    <div data-background="path/to/image.jpg" class="lazy">
        ...
    </div>
    ...
</div>

That is all, after image appears in viewport, it will be loaded. After that lazy class will be replaced with lazy-loaded.

With Fade-in Effect

If you want to add fade-in effect when image is loaded, you need to add additional lazy-fadein class to image/element:

<div class="page-content">
    ...
    <img data-src="path/to/image.jpg" class="lazy lazy-fadein">
    <div data-background="path/to/image.jpg" class="lazy lazy-fadein">
        ...
    </div>
    ...
</div>

Trigger Lazy Load Manually

It is possible to trigger image loading by triggering "lazy" event on lazy image/element, for example:

$$('img.lazy').trigger('lazy');
 
$$('div.lazy').trigger('lazy');