JQuery Lazyload Demo

by Taufik Nurrohman

HTML

<script src="http://reader-download.googlecode.com/svn/trunk/lazyload.js"></script>
<img src="http://lorempixel.com/200/200/food/1" alt="Loading..."/>
<img src="http://lorempixel.com/200/200/food/2" alt="Loading..."/>
<img src="http://lorempixel.com/200/200/food/3" alt="Loading..."/>
<img src="http://lorempixel.com/200/200/food/4" alt="Loading..."/>
<img src="http://lorempixel.com/200/200/food/5" alt="Loading..."/>
<img src="http://lorempixel.com/200/200/food/6" alt="Loading..."/>
<img src="http://lorempixel.com/200/200/food/7" alt="Loading..."/>
<img src="http://lorempixel.com/200/200/food/8" alt="Loading..."/>
<img src="http://lorempixel.com/200/200/food/9" alt="Loading..."/>
<img src="http://lorempixel.com/200/200/food/10" alt="Loading..."/>

<img src="http://lorempixel.com/200/200/animals/1" alt="Loading..."/>
<img src="http://lorempixel.com/200/200/animals/2" alt="Loading..."/>
<img src="http://lorempixel.com/200/200/animals/3" alt="Loading..."/>
<img src="http://lorempixel.com/200/200/animals/4" alt="Loading..."/>
<img src="http://lorempixel.com/200/200/animals/5" alt="Loading..."/>
<img src="http://lorempixel.com/200/200/animals/6" alt="Loading..."/>
<img src="http://lorempixel.com/200/200/animals/7" alt="Loading..."/>
<img src="http://lorempixel.com/200/200/animals/8" alt="Loading..."/>
<img src="http://lorempixel.com/200/200/animals/9" alt="Loading..."/>
<img src="http://lorempixel.com/200/200/animals/10" alt="Loading..."/>

<img src="http://lorempixel.com/200/200/sports/1" alt="Loading..."/>
<img src="http://lorempixel.com/200/200/sports/2" alt="Loading..."/>
<img src="http://lorempixel.com/200/200/sports/3" alt="Loading..."/>
<img src="http://lorempixel.com/200/200/sports/4" alt="Loading..."/>
<img src="http://lorempixel.com/200/200/sports/5" alt="Loading..."/>
<img src="http://lorempixel.com/200/200/sports/6" alt="Loading..."/>
<img src="http://lorempixel.com/200/200/sports/7" alt="Loading..."/>
<img src="http://lorempixel.com/200/200/sports/8"...

CSS

body {
  padding:10px;
  color:transparent;
  text-align:center;
}

img {
  display:block;
  margin:5px auto;
  width:200px;
  height:200px;
  background-color:#ccc;
}

JavaScript

$(function() {
    $('img').lazyload({
        placeholder: "http://2.bp.blogspot.com/-sJ-tZahntLI/T9coeqmdqMI/AAAAAAAADUQ/ztxIT1Fht4g/s1600/grey.png",
        effect: "fadeIn",
        threshold: 500
    });
});