How to use LazyLoad.Js


Lazy Load depends on jQuery. Include them both in your HTML code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>


To apply LazyLoad to the images, we need to define a unique class within the image tag which will be identified by the plugin and then hook it into the lazyload(); function.

$("img.lazy").lazyload({effect : "fadeIn"});


For the img tag, we are not going to use the “src” attribute, instead we are going to use a new attribute “data-original”. Also, make sure to include both width and height attributes because without them the plugin may not work or can cause undesirable behaviors.

<img class="lazy" data-original="images/1.jpg" width="640" height="480">

Complete code:


<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<script>
$(function() {
    $("img.lazy").lazyload({effect : "fadeIn"});
});
</script>
</head>
<body>
    <div align = "center">
        <img class="lazy" data-original="images/1.jpg" width="640" height="480"><br />
        <img class="lazy" data-original="images/2.jpg" width="640" height="480"><br />
        <img class="lazy" data-original="images/3.jpg" width="640" height="480"><br />
        <img class="lazy" data-original="images/4.jpg" width="640" height="480"><br />
        <img class="lazy" data-original="images/5.jpg" width="640" height="480"><br />
        <img class="lazy" data-original="images/6.jpg" width="640" height="480"><br />
        <img class="lazy" data-original="images/7.jpg" width="640" height="480"><br />
        <img class="lazy" data-original="images/8.jpg" width="640" height="480"><br />
        <img class="lazy" data-original="images/9.jpg" width="640" height="480"><br />
        <img class="lazy" data-original="images/10.jpg" width="640" height="480"><br />
        <img class="lazy" data-original="images/11.jpg" width="640" height="480">
    </div>
</body>
</html>







Related Post


Latest Post


Recent Posts Widget

Make sure to never miss a thing...

Get the latest news from the creative industry along with other creative goodies, conveniently delivered to social media.