Improve Your Blog's Loading Time Using jQuery

Improve Your Blog’s Loading Time Using jQuery

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

Snapshot48 Sep. 29 21.27

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='' 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='' type='text/javascript'/>
    <script type='text/javascript'>
    $(function() {
      $(&quot;.post img&quot;).lazyload({
        placeholder : &quot;;,
        threshold : 200
<!-- End of LazyLoad -->


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 : "" });

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.

blog comments powered by Disqus