Super Easy jQuery Content Lazy Load Plugin - LazyContent

LazyContent is an ultra-light jQuery plugin used to smartly lazy load images and other Html elements when they're scrolled into the viewport. so you can save bandwidth and server requests.

How to use it:

1. Include the jQuery javascript library and jquery.lazy_content.js script in the page.

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

2. Include the jquery.lazy_content_img.js if you want to delay loading of images only.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="src/jquery.lazy_content.js" type="text/javascript"></script>
<script src="src/jquery.lazy_content_img.js" type="text/javascript"></script>

3. Lazy load images with '.lazy' classes.

<img class="lazy" data-src="1.jpg">
<img class="lazy" data-src="2.jpg">
<img class="lazy" data-src="3.jpg">

<script>
$("img.lazy").lazyContentImg({
  threshold: 0 // The amount of pixels to load earlier
});
</script>

4. Lazy load any content.

<section>
<div class="loading"> 
<span>Loading...</span> </div>
<div class="content">
<img class="lazy" data-src="1.jpg">
<img class="lazy" data-src="2.jpg">
<img class="lazy" data-src="3.jpg">
</div>
</section>


<script>
$("section").lazyContent({
threshold: 0, // The amount of pixels to load earlier
load: function(element) { // Callback for loaded element
element.find(".loading").hide();
element.find("img").each(function() {
var $img = $(this);
$img.attr("src", $img.data("src"));
$img.load(function() { $img.addClass("loaded") });
});

element.find(".content").show();
}
});
</script>

Change log:

2015-04-15

• added destroy method.

---

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