jquery lazy load image plugin

You may heard about this technique,it appears about in 2007,with it your page can load images when it’s it’s turn to appear.That means when your page is very huge and long enough,you need to reduce the server load,just load the images in your viewport and load the others when you scroll the window.
It’s very easy to use it,just one file and jquery library are necessary.Include them in your page with this form:



The basic method to use it:

$("img").lazyload();

With this short code you make all images of your page below the fold to be lazy loaded.
There are also serival options to set to control the jquery lazy load plugin.You can control when to trriger your lazy load,set a placeholder image and an event to trriger it,make different effect of your lazy load,or just lazy load images in one container,delay loading the images or load the image not by it’s order in your page.All of these can be realized.
Most of the options i will place you here:
Option One(the basic):

$("img").lazyload();

Option Two(setting sensitivity):

$("img").lazyload({ threshold : 200 });

Option Three(placeholder image):

$("img").lazyload({ placeholder : "img/grey.gif" });
Option Four(event to trriger loading):
$("img").lazyload({
    placeholder : "img/grey.gif",
    event : "click"
});

Option Five(changing effect):

$("img").lazyload({
    placeholder : "img/grey.gif",
    effect : "fadeIn"
});

Option Six(images in container):

$("img").lazyload({
     placeholder : "img/grey.gif",
     container: $("#container")
});

Option Seven:

$("img").lazyload({
    failurelimit : 10
});

Option Eight:

$(function() {
    $("img:below-the-fold").lazyload({
        placeholder : "img/grey.gif",
        event : "sporty"
    });
});
$(window).bind("load", function() {
    var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000);
});

I shall let you know:by now,the jquery lazy load image plugin is not always available in all browsers,don’t be suprise when you meet it,and if you find the resolution let me know.

One thought on “jquery lazy load image plugin

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>