How to Create Lazy-Loading Images for your Website

The effects of lazy load images can be seen on a number of websites. This technique forces your images to pause the loading process until the reader has viewed that specific area of the page. Web designers can build this onto a webpage through a number of resources, especially jQuery plugins.

featured preview - lazy-loading images demo screenshot

In this article I’d like to examine lazy-loading images and why so many people are interested in the technique. Then I’ll offer a brief tutorial which explains how you can include a popular jQuery plugin and customize the settings for your own lazy image loader. This doesn’t require much knowledge in the realm of JavaScript which is great for non-technical webmasters.

Why Lazy Load?

To start I’d like to explain just a couple benefits for using lazy-loading on your website. When visitors first land on your blog there may be a number of images which need to be processed. This could take just a couple seconds or even 8-10 extra seconds for the request to finish. Waiting around for that long can get tiresome and you’ll lose people’s interest rather quickly.

I have noticed the longest waiting times for blog posts often contain image galleries. These galleries may hold website design showcases, UI designs, or any page/article with lots of cascading images. If your readers have speedy Internet access this probably won’t become much of a burden.

But is the risky burden even worthwhile? I feel these instances are great examples for when lazy-loading could honestly benefit the readers. All images on the page will be held with placeholders until the user scrolls down further and hits each image in succession. There are often people who complain about this feature but I don’t see any problems. Personally I’ve never been annoyed by the effect and it actually seems like a wise method for reducing server loads.

Lazy-Loading Process Explained

I want to quickly go over how this effect will be processed in simple terms. First we include the jQuery library and a copy of the JS code for any plugin we choose. Then all your img tags should be edited to point the src attribute towards a placeholder image. I’m using a blank 1×1 px grey block so the images are just grey. It’s also not very server-intensive to load a small 1px gif file.

The image placeholders should be the exact same width and height as your image media so the page scrollbar won’t jump around as you’re loading more. The actual images are only loaded into cache memory as you scroll past them on the page. Otherwise nothing is loaded except the very top portion of your article.

Mika Tuupola plugin project website open source lazy-loading images

Now before jumping into my demo example we should first look over the jQuery plugin. I’ll be using the Lazy Load script by Mika Tuupola which has become very well known amongst web developers. It is so incredibly easy to work with his script and customize your images both for desktop and mobile browser support.

The Lazy Load Demo

You can check out my live demo from the link below to see this plugin working in action. The project page offers a ton of information about how to setup the script and get it working properly. There are also dozens of customizable options for targeting specific images, containers, and animation effects.

live demo preview screenshot lazy-loading images

I have created a simple HTML5 document and included the most recent jQuery library from Google’s CDN. You should download the most recent minified lazyload script and include this document as well. There are only a few minor customizations we need to get this script working properly.

Handling Custom Image Data

First you’ll need to determine which images should be intended for lazy-loading. I’m targeting only images with the class .lazy so that our script doesn’t conflict with other images found in alternate areas of the webpage(sidebar, footer, etc.). Additionally we need to rename the image src to point towards an image placeholder. The full image URL goes into the data-original attribute which is now valid in the HTML5 schema.

It’s also crucial that you include the width and height attribute on all your lazyload images. If you don’t then they will only appear as the size of your placeholder gif, and this will screw up the entire script. If you don’t know the size of your images just view the properties in your explorer window and copy the details.

Aside from the lazy-loading image we should also offer a regular image for users without JavaScript. It’s strange to think people would access the Internet without JavaScript enabled but there are plenty of situations where this does happen every day. To solve this problem we can place a regular image inside the <noscript> tag without the data-original attribute and without the .lazy class. Below is an example of my image code so far:

<div class="frame"><img class="lazy" src="img/g.gif" data-original="img/interior_01.jpg" width="500" height="333" alt="interior shot #1"></div>
<noscript><img src="img/interior_01.jpg" width="500" height="333" alt="interior shot #1"></noscript>

You don’t need to include the frame div as I have only added this for CSS3 effects in the demo. It’s important to remember that everything inside the noscript tag will only be displayed if there is no JavaSscript enabled. If that’s the case your original lazy load image will simply appear as a grey box. You could hide these .lazy class images using CSS display:none; inside another noscript tag in your header or before the closing </body>.

Lazy Loader JavaScript Method

The one final piece we need to call is accessing our custom lazyload jQuery plugin. You should add a script block somewhere towards the bottom of your body and copy over this code:

[js]<script type="text/javascript">
$("img.lazy").lazyload({
effect: "fadeIn"
});
</script>[/js]

Now honestly you can get away with no parameters passed into the function call. Running something like $("img.lazy").lazyload(); is completely valid and should still work. But from reading over the documentation page we can pass in some optional variables, one of which is the animation effect.

As you’re scrolling this fading effect looks awesome and denotes the whole idea of “lazy load”. Otherwise it can look like your server is having hangups or that your images are behaving awkwardly and then just appearing. You can see the differences from the animated fading on the lazyload plugin’s effects page which also has a demo without any effects. How you setup the script on your website is entirely your choice!

lazyloading jquery plugin script demo tutorial preview

Final Thoughts

I do hope you can take away some good ideas and code examples from this article. Lazy-loading is fairly popular and has gotten bad press from numerous web developers. I would argue that it’s not a requirement for blogs or websites, but more of a convenience if you feel that you are publishing content with lots of image media.

If you have the time be sure to check out my simple demo example above. I’ve included a .zip file with my source code which you can download and setup as a testing environment. This may be easier than copying my source directly from the article if you’re having issues with the plugin. But additionally feel free to let us know your thoughts or questions in the post discussion area below.

Author: (103 Posts)

Jake Rocheleau is a passionate web designer and social media entrepreneur. He is frequently researching the latest trends in digital design and new-age Internet ideas. He's also an advocate for the social media revolution - follow his updates on Twitter @jakerocheleau.

Comments