Vanilla JavaScript Library For Image Lazy Load – vanillaLazyLoad

Preview:

Description:

Yet another vanilla JavaScript library that helps delay the loading of images until they become visible in the viewport. Helpful to speed up page loading times and decrease traffic. Also supports background images.

How to use it:

First you need to load the vanilla-lazyloading.js script before the closing body tag:

<script src="js/vanilla-lazyloading.js"></script>

To lazy load an image, just specify the file path using ‘data-vllsrc’ attribute instead of ‘src’.

<img data-vllsrc="image.jpg">

Lazy load a background image as follows:

<div data-vllsrc="bg.jpg" 
     data-vlltype="background">
</div>

You can also specify the offset to trigger the lazy load behavior.

<div data-vllsrc="bg.jpg" 
     data-vlltype="background"
     data-vlloffset="200">
</div>

More data attributes:

• data-vllactionsrc: Load child images when interacting with items
• data-vllblanksrc: Add a default square transparent image. 1 = Enable.
• data-vllclassname: Additional CSS class.
• data-vlloffset: Offset in pixels.
• data-vlltarget: Target container.
• data-vllrespsrc: For responsive image.
• data-vllwaitforload: Replace src only when the new image is fully loaded.
• data-vlltype: ‘background’, ‘classname’, or ‘none’. 1 = Enable.

Changelog:

v0.12.0

• JS update