jQuery Plugin For Responsive Lazy Loader - LaziestLoader

LaziestLoader is a jQuery retina-ready and smart lazy load plugin for lazy loading appropriate images or other html elements until they become visible in the viewport. Suitable for responsive website to speed up the page load time.

How to use it:

1. Load the jQuery library and jQuery laziestloader plugin at the bottom of the page.

<script src="jquery.min.js"></script> 
<script src="jquery.laziestloader.js"></script> 

2. Insert an image with data-pattern and data-widths attribute to set the image sources for different resolution.

<img class="lazy" src="img/transparent.gif" data-pattern="img/ar-{{size}}.jpg" data-widths="[320, 900, 1500]">

3. Call the plugin with options.

<script>
$(function() {
$('.lazy').laziestloader({
threshold:300 // If you want your images to load earlier than 300px before they appear on the screen
});
});
</script>

---

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