Lazy Load Image

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>