jQuery Plugin To Lazy Load Images While Scrolling - Lazyload

File Size: 8.8 KB
Views Total: 2722
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Lazy Load Images While Scrolling - Lazyload

Lazyload is a jQuery plugin to speed up the initial page load time by delaying the load of background images until they are scrolled into view. 

Features:

  • Loading spinner.
  • Fallback for error image.
  • Custom placeholder image.
  • Supports both images or background images.

How to use it:

1. Place the jQuery Lazyload script after jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="lazyload.js"></script>

2. Add background images to your containers using dataimg attribute.

<div class="lazy" dataimg="1.jpg">

3. Call the plugin and done.

$("body").lazyload();

4. Options and defaults.

loadHidden: true,
interval: 200,
threshold: 3,
listCell:"lazy",
isImg:false,
placeAttr:"dataimg", // custom attribute that holds your images
errorImg: "",
container: null,
placeholder: null

This awesome jQuery plugin is developed by singod. For more Advanced Usages, please check the demo page or visit the official website.