Minimalist Image Lazy Load Plugin - jquery.lazy

A dead simple, ultra-light (1kb), and cross-browser jQuery image lazy load plugin that dynamically loads and replaces the placeholder with original image when the img tag is scrolled into view.

See it in action:

How to use it:

1. To use this plugin, download and insert the JavaScript file 'jquery.lazy.js' after jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="src/jquery.lazy.js"></script>

2. Add the 'lazy' attribute to the images you want to delay the loading event until they comes into view.

• src: path to the placeholder image
• data-src: path to the original image

<img lazy 
     src="placeholder.jpg" 
     data-src="1.jpg">
<img lazy 
     src="placeholder.jpg" 
     data-src="2.jpg">
<img lazy 
     src="placeholder.jpg" 
     data-src="3.jpg">
<img lazy 
     src="placeholder.jpg" 
     data-src="4.jpg">
<img lazy 
     src="placeholder.jpg" 
     data-src="5.jpg">

3. That's it. To initialize the plugin manully, just by calling the function on the img and done.

<img class="lazy-load"
     src="placeholder.jpg" 
     data-src="1.jpg">
<img class="lazy-load"
     src="placeholder.jpg" 
     data-src="2.jpg">
<img class="lazy-load"
     src="placeholder.jpg" 
     data-src="3.jpg">
<img class="lazy-load" 
     src="placeholder.jpg" 
     data-src="4.jpg">
<img class="lazy-load"
     src="placeholder.jpg" 
     data-src="5.jpg">

$(function(){

  $('.lazy-load').lazy();

});

---

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