Link these Files:-
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Untitled Page</title>
<link href="http://www.jqueryscript.net/demo/Super-Easy-jQuery-Content-Lazy-Load-Plugin-LazyContent/style.css"
media="all" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.jqueryscript.net/demo/Super-Easy-jQuery-Content-Lazy-Load-Plugin-LazyContent/src/jquery.lazy_content.js"></script>
Code.aspx:-
<div class="container">
<section>
<div class="loading"> <span>Loading...</span> </div>
<div class="content"> <img class="lazy" data-src="http://lorempixel.com/250/250/abstract/1"> <img class="lazy" data-src="http://lorempixel.com/250/250/city/1"> <img class="lazy" data-src="http://lorempixel.com/250/250/people/1"> <img class="lazy" data-src="http://lorempixel.com/250/250/transport/1"> <img class="lazy" data-src="http://lorempixel.com/250/250/animals/1"> <img class="lazy" data-src="http://lorempixel.com/250/250/food/1"> <img class="lazy" data-src="http://lorempixel.com/250/250/nature/1"> <img class="lazy" data-src="http://lorempixel.com/250/250/business/1"> </div>
</section>
<section>
<div class="loading"> <span>Loading...</span> </div>
<div class="content"> <img class="lazy" data-src="http://lorempixel.com/250/250/abstract/2"> <img class="lazy" data-src="http://lorempixel.com/250/250/city/2"> <img class="lazy" data-src="http://lorempixel.com/250/250/people/2"> <img class="lazy" data-src="http://lorempixel.com/250/250/transport/2"> <img class="lazy" data-src="http://lorempixel.com/250/250/animals/2"> <img class="lazy" data-src="http://lorempixel.com/250/250/food/2"> <img class="lazy" data-src="http://lorempixel.com/250/250/nature/2"> <img class="lazy" data-src="http://lorempixel.com/250/250/business/2"> </div>
</section>
<section>
<div class="loading"> <span>Loading...</span> </div>
<div class="content"> <img class="lazy" data-src="http://lorempixel.com/250/250/abstract/3"> <img class="lazy" data-src="http://lorempixel.com/250/250/city/3"> <img class="lazy" data-src="http://lorempixel.com/250/250/people/3"> <img class="lazy" data-src="http://lorempixel.com/250/250/transport/3"> <img class="lazy" data-src="http://lorempixel.com/250/250/animals/3"> <img class="lazy" data-src="http://lorempixel.com/250/250/food/3"> <img class="lazy" data-src="http://lorempixel.com/250/250/nature/3"> <img class="lazy" data-src="http://lorempixel.com/250/250/business/3"> </div>
</section>
<section>
<div class="loading"> <span>Loading...</span> </div>
<div class="content"> <img class="lazy" data-src="http://lorempixel.com/250/250/abstract/4"> <img class="lazy" data-src="http://lorempixel.com/250/250/city/4"> <img class="lazy" data-src="http://lorempixel.com/250/250/people/4"> <img class="lazy" data-src="http://lorempixel.com/250/250/transport/4"> <img class="lazy" data-src="http://lorempixel.com/250/250/animals/4"> <img class="lazy" data-src="http://lorempixel.com/250/250/food/4"> <img class="lazy" data-src="http://lorempixel.com/250/250/nature/4"> <img class="lazy" data-src="http://lorempixel.com/250/250/business/4"> </div>
</section>
<section>
<div class="loading"> <span>Loading...</span> </div>
<div class="content"> <img class="lazy" data-src="http://lorempixel.com/250/250/abstract/5"> <img class="lazy" data-src="http://lorempixel.com/250/250/city/5"> <img class="lazy" data-src="http://lorempixel.com/250/250/people/5"> <img class="lazy" data-src="http://lorempixel.com/250/250/transport/5"> <img class="lazy" data-src="http://lorempixel.com/250/250/animals/5"> <img class="lazy" data-src="http://lorempixel.com/250/250/food/5"> <img class="lazy" data-src="http://lorempixel.com/250/250/nature/5"> <img class="lazy" data-src="http://lorempixel.com/250/250/business/5"> </div>
</section>
<section>
<div class="loading"> <span>Loading...</span> </div>
<div class="content"> <img class="lazy" data-src="http://lorempixel.com/250/250/abstract/6"> <img class="lazy" data-src="http://lorempixel.com/250/250/city/6"> <img class="lazy" data-src="http://lorempixel.com/250/250/people/6"> <img class="lazy" data-src="http://lorempixel.com/250/250/transport/6"> <img class="lazy" data-src="http://lorempixel.com/250/250/animals/6"> <img class="lazy" data-src="http://lorempixel.com/250/250/food/6"> <img class="lazy" data-src="http://lorempixel.com/250/250/nature/6"> <img class="lazy" data-src="http://lorempixel.com/250/250/business/6"> </div>
</section>
<section>
<div class="loading"> <span>Loading...</span> </div>
<div class="content"> <img class="lazy" data-src="http://lorempixel.com/250/250/abstract/7"> <img class="lazy" data-src="http://lorempixel.com/250/250/city/7"> <img class="lazy" data-src="http://lorempixel.com/250/250/people/7"> <img class="lazy" data-src="http://lorempixel.com/250/250/transport/7"> <img class="lazy" data-src="http://lorempixel.com/250/250/animals/7"> <img class="lazy" data-src="http://lorempixel.com/250/250/food/7"> <img class="lazy" data-src="http://lorempixel.com/250/250/nature/7"> <img class="lazy" data-src="http://lorempixel.com/250/250/business/7"> </div>
</section>
<section>
<div class="loading"> <span>Loading...</span> </div>
<div class="content"> <img class="lazy" data-src="http://lorempixel.com/250/250/abstract/8"> <img class="lazy" data-src="http://lorempixel.com/250/250/city/8"> <img class="lazy" data-src="http://lorempixel.com/250/250/people/8"> <img class="lazy" data-src="http://lorempixel.com/250/250/transport/8"> <img class="lazy" data-src="http://lorempixel.com/250/250/animals/8"> <img class="lazy" data-src="http://lorempixel.com/250/250/food/8"> <img class="lazy" data-src="http://lorempixel.com/250/250/nature/8"> <img class="lazy" data-src="http://lorempixel.com/250/250/business/8"> </div>
</section>
<section>
<div class="loading"> <span>Loading...</span> </div>
<div class="content"> <img class="lazy" data-src="http://lorempixel.com/250/250/abstract/9"> <img class="lazy" data-src="http://lorempixel.com/250/250/city/9"> <img class="lazy" data-src="http://lorempixel.com/250/250/people/9"> <img class="lazy" data-src="http://lorempixel.com/250/250/transport/9"> <img class="lazy" data-src="http://lorempixel.com/250/250/animals/9"> <img class="lazy" data-src="http://lorempixel.com/250/250/food/9"> <img class="lazy" data-src="http://lorempixel.com/250/250/nature/9"> <img class="lazy" data-src="http://lorempixel.com/250/250/business/9"> </div>
</section>
<section>
<div class="loading"> <span>Loading...</span> </div>
<div class="content"> <img class="lazy" data-src="http://lorempixel.com/250/250/abstract/10"> <img class="lazy" data-src="http://lorempixel.com/250/250/city/10"> <img class="lazy" data-src="http://lorempixel.com/250/250/people/10"> <img class="lazy" data-src="http://lorempixel.com/250/250/transport/10"> <img class="lazy" data-src="http://lorempixel.com/250/250/animals/10"> <img class="lazy" data-src="http://lorempixel.com/250/250/food/10"> <img class="lazy" data-src="http://lorempixel.com/250/250/nature/10"> <img class="lazy" data-src="http://lorempixel.com/250/250/business/10"> </div>
</section>
</div>
<script charset="utf-8">
$("section").lazyContent({
threshold: 0,
load: function(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>