Lazy Load depends on jQuery. Include them both in your HTML code:
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.
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.
<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>
