How to use LazyLoad.Js

I was recently working on a portfolio website that contains a lot of images, this kind of website usually takes longer to load since it has to complete rendering all page images from top to bottom. Lately I came across this plugin called “LazyLoad” which delays the loading of images in long web pages, the images outside of viewport are not loaded until user scrolls to them. Using this plugin will make the page load faster, it can also help to reduce server load.

Download Example

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

1 2	<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.

1	$("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.

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

Complete code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!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>

If you need to load images from another server, you can use AJAX via the jQuery function: load();

1
2
3
4
5

$("#container").one("click", function() {
$("#container").load("images.html", function(response, status, xhr) {
$("img.lazy").lazyload();
});
});

When checking the example, clear browser cache between each request. You can check what is actually loaded using your browser’s developer console (Chrome, Safari and IE) or FireBug (Firefox)

If you check your console, you will notice that the images that are NOT YET visible looks like this:

1	<img class="lazy" data-original="images/3.jpg" width="640" height="480" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC">

The “src” attribute doesn’t have the actual path, therefore it hasn’t been loaded yet.

Using LazyLoad with AJAX

To achieve this, we have to make sure that we execute LazyLoad only when the DOM elements have already been outputted to the screen, so it would make sense if we put our LazyLoad script after displaying the images on AJAX success.

1
2
3
4
5
6
7
8
9
10

$.post(ajax_url, data, function(response, textStatus, jqXHR) {
if(textStatus == 'success'){
// Display the images into the container
$(".container").html($(response).fadeIn('slow'));
// Execute LazyLoad
$('.lazy').lazyload({
effect: 'fadeIn'
});
}
});

Fall back for browsers that do not support JavaScript

It is always a good practice to enable default image to load when JavaScript is not supported by the browser.

1 2	<img class="lazy" src="images/example.jpg" data-original="img/example.jpg" width="100%" /> <noscript><img src="images/example.jpg" width="100%" /></noscript>

To prevent double copy of images from showing up, we should place the following CSS on our stylesheet file:

1
2
3

.lazy {
display: none;
}

Ensuring that we initialize the images and would only show if JavaScript is enabled, we need to force the images to show up using the .show() function. Our code will now look like this:

1
2
3

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

Do you need help with a project? or have a new project in mind that you need help with?

Contact Me