Images are on of the most effective things when it comes to making your blog slow. What if you have a way that tells your images to load only when they are needed? I mean only when the users will really look at them, even after the whole page is loaded? That is called “Lazy Loading” and can be easily achieved using a great jQuery plugin.
In this tutorial we will use jQuery Lazyload, a wonderful plugin that delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them.
Lazyloader is inspired by YUI ImageLoader Utility by Matt Mlinac. Demo page is available.
Step 1 – Installing jQuery Library
This plugin is based on jQuery, a wonderful and very useful JavaScript library that can improve any website in a lot of ways.
To have jQuery installed on your blog, just paste the following code right before the </head> tag:
<!-- jQuery Call --><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<!-- End of jQuery Call –>Once installed, jQuery will allow you to use many kinds of plugins, most of them can improve your website in such a great way. We will have more jQuery tutorials in the future and all of them will need this step.
Step 2 – Installing Lazyload Plugin
The next thing we need to do is to install the Lazyload plugin on our blog, to do it, just paste the following code right before the </head> tag:
<!-- LazyLoad --><script src='http://dl.getdropbox.com/u/1693834/javascript/lazyload.js' type='text/javascript'/>$(".post img").lazyload({placeholder : "http://i195.photobucket.com/albums/z105/dantearaujo/box.gif",threshold : 200});});</script>
<!-- End of LazyLoad -->Sensivity
You can set up how close to the edge image should come before it is loaded. To do this modify the threshold value. Default is 0 (when it is visible).
$("img").lazyload({ threshold : 200 });Placeholder Image
You can also set a placeholder image that will take place before the real image is not fully loaded. This placeholder should be an URL to image.
$("img").lazyload({ placeholder : "http://i195.photobucket.com/albums/z105/dantearaujo/box.gif" });
Further Adjustments
The are many other ways to customize this template, I have only talked about the ones that would really be useful for improving the loading time of your blog. To get more information about how to adjust Lazyloader plugin to fit your needs, please head to its website.
Final Words
This article is very handy for those that have long blogs and need to load a lot of images. Having a fast loading webpage nowadays is a key to blogging success, user mostly hate slow pages and they will certainly get out of your blog when they see it’s taking forever to load.
If you have any suggestion or question regarding this tutorial, please drop a comment or contact us.
