Dead Simple jQuery Content Lazy Load Plugin - lazyscript

Dead Simple jQuery Content Lazy Load Plugin - lazyscript
File Size: 4.64 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

lazyscript is an ultra-light jQuery plugin to provide lazy load functionality just by adding a custom jQuery selector class to your Html elements.

How to use it:

1. Load the jQuery lazyscript plugin after loading jQuery Javascript library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.lazyscript.js"></script>

2. Add a custom CSS class to the images which you want to delay the loading until they come into viewport.

<div data-src="1.jpg" class="lazy">Loading...</div>
<div data-src="2.jpg" class="lazy">Loading...</div>
<div data-src="3.jpg" class="lazy">Loading...</div>
...

3. Initialize the plugin and done.

$(document).ready(function () {
$(window).lazyScript({
selectorClass: 'lazy',
callback: jQuery.noop,
threshold: 0,
scrollInterval: 500
});
});

Change log:

2015-08-21

  • new version with pause/resume and do not remove the class if the callback returns false

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