jQuery Plugin For Background Image Lazy Loading - bglazyload.js

File Size: 36.9 KB
Views Total: 1595
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Background Image Lazy Loading - bglazyload.js

bglazyload.js is a super simple jQuery plugin used to delay loading of images until container is scrolled more than 33% in viewport. Help for long web page containing many large background images to make the page load faster.

How to use it:

1. Load jQuery library and the jQuery bglazyload.js script in your webpage.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src='js/jquery.bglazyload.js'></script>

2. Add background image into a container using data-bgimg attribute.

<div class="lazy" data-bgimg="demo.jpg">
...
</div>

3. Call the bglazyload() function on the container and the plugin will take care of the rest.

$('.lazy').bglazyload();

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