Vanilla JavaScript Library For Image Lazy Load – vanillaLazyLoad

Category: Image , Javascript , Loading | September 3, 2018
Author: JavaScriptUtilities
Views Total: 2,937
Official Page: Go to website
Last Update: September 3, 2018
License: MIT

Preview:

Vanilla JavaScript Library For Image Lazy Load – vanillaLazyLoad

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

You Might Be Interested In:


Leave a Reply