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.
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 that 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 web admins.
Why Lazy Load?
To start, I’d like to explain just a couple of benefits of using lazy-loading on your website. When visitors first land on your blog, there may be a number of images that need to be processed. This could take just a couple of 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 of 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.
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 set up the script and get it working properly. There are also dozens of customizable options for targeting specific images, containers, and animation effects.
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 lazy-load 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 lazy-loaded 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 JavaScript 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 lazy-load jQuery plugin. You should add a script block somewhere towards the bottom of your body and copy over this code:
<script type="text/javascript">
$("img.lazy").lazyload({
effect: "fadeIn"
});
</script>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 has hangups or that your images are behaving awkwardly and then just appearing. You can see the differences from the animated fading on the lazy-load plugin’s effects page, which also has a demo without any effects. How you set up the script on your website is entirely your choice!
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.
Suppose 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 set up as a testing environment. This may be easier than copying my source directly from the article if you’re having issues with the plugin.
Top