Looking into the jQuery LazyLoad Plugin
- by nikolaosk
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!!!
