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!!!
