Nikolaos Kantzelis ASP.Net Blog

This blog will focus on ASP.NET Framework

Sponsors

About Me

Great Blogs

Looking into the jQuery LazyLoad Plugin

I have been using JQuery for a couple of years now and it has helped me to solve many problems on the client side of web development. 

You can find all my posts about JQuery in this link. In this post I will be providing you with a hands-on example on the JQuery LazyLoad Plugin.If you want you can have a look at this post, where I describe the JQuery Cycle Plugin.You can find another post of mine talking about the JQuery Carousel Lite Plugin here. Another post of mine regarding the JQuery Image Zoom Plugin can be found here. You can have a look at the JQuery Overlays Plugin here .

There are times when when I am asked to create a very long page with lots of images.My first thought is to enable paging on the proposed page. Imagine that we have 60 images on a page. There are performance concerns when we have so many images on a page. Paging can solve that problem if I am allowed to place only 5 images on a page.Sometimes the customer does not like the idea of the paging.Believe it or not some people find the idea of paging not attractive at all.

In that case I need a way to only load the initial set of images and as the user scrolls down the page to load the rest.So as someone scrolls down new requests are made to the server and more images are fetched.

I can accomplish that with the jQuery LazyLoad Plugin.This is just a plugin that delays loading of images in long web pages.

The images that are outside of the viewport (visible part of web page) won't be loaded before the user scrolls to them.

Using jQuery LazyLoad Plugin on long web pages containing many large images makes the page load faster.

In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.

You can use Visual Studio 2012 Express edition. You can download it here. 

You can download this plugin from this link.

I launch Expression Web 4.0 and then I type the following HTML markup (I am using HTML 5)

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Liverpool Legends</title>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="jquery.lazyload.min.js" ></script>
</head>

  <body>
    <header>
   
   
        <h1>Liverpool Legends</h1>

    </header>
   
    <div id="main">
   
 
        <img src="barnes.JPG" width="800" height="1100" /><p />
        <img src="dalglish.JPG" width="800" height="1100" /><p />

   
   
        <img class="LiverpoolImage" src="loader.gif" data-original="fans.JPG" width="1200" height="900" /><p />
        <img class="LiverpoolImage" src="loader.gif" data-original="lfc.JPG" width="1000" height="700" /><p />
        <img class="LiverpoolImage" src="loader.gif" data-original="Liverpool-players.JPG" width="1100" height="900" /><p />
        <img class="LiverpoolImage" src="loader.gif" data-original="steven_gerrard.JPG" width="1110" height="1000" /><p />
        <img class="LiverpoolImage" src="loader.gif" data-original="robbie.JPG" width="1200" height="1000" /><p />
     
    </div>
   
   
    <footer>
   
    <p>All Rights Reserved</p>
 
    </footer>
   
   
            <script type="text/javascript">
                $(function () {
                    $("img.LiverpoolImage").lazyload();
                });
        </script>
  
  </body>
 
</html>

This is a very simple markup. I have  added references to the JQuery library (current version is 1.8.3) and the JQuery LazyLoad Plugin.

Firstly, I add two images

        <img src="barnes.JPG" width="800" height="1100" /><p />
        <img src="dalglish.JPG" width="800" height="1100" /><p />

 

 that will load immediately as soon as the page loads.

Then I add the images that will not load unless they become active in the viewport. I have all my img tags pointing the src attribute towards a placeholder image. I’m using a blank 1×1 px grey image,loader.gif.

The five images that will load as the user scrolls down the page follow.

 

        <img class="LiverpoolImage" src="loader.gif" data-original="fans.JPG" width="1200" height="900" /><p />
        <img class="LiverpoolImage" src="loader.gif" data-original="lfc.JPG" width="1000" height="700" /><p />
        <img class="LiverpoolImage" src="loader.gif" data-original="Liverpool-players.JPG" width="1100" height="900" /><p />
        <img class="LiverpoolImage" src="loader.gif" data-original="steven_gerrard.JPG" width="1110" height="1000" /><p />
        <img class="LiverpoolImage" src="loader.gif" data-original="robbie.JPG" width="1200" height="1000" /><p />

Then we need to rename the image src to point towards the proper image placeholder. The full image URL goes into the data-original attribute.

The Javascript code that makes it all happen follows. We need to make a call to the JQuery LazyLoad Plugin. We add the script just before we close the body element.

        <script type="text/javascript">
                $(function () {
                    $("img.LiverpoolImage").lazyload();
                });
        </script>

We can change the code above to incorporate some effects.

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

That is all I need to write to achieve lazy loading. It it true that you can do so much with less!!

I view my simple page in Internet Explorer 10 and it works as expected.

I have tested this simple solution in all major browsers and it works fine.

You can test it yourself and see the results in your favorite browser.

Hope it helps!!!

Comments

luxurybrandroadnurhw@mail.com said:

marked this. please try more!

# December 19, 2012 5:11 AM

Daley said:

Spot on with this write-up, I seriously believe this website needs a lot more

attention. I'll probably be returning to read through more, thanks for the advice!

# December 23, 2012 10:47 PM

Alex said:

Nice article. Very useful for some my MVC projects!

# January 9, 2013 3:50 AM