Question

In the Lazy Load plugin’s documentation (A jQuery plugin that loads images only when an event occurs) says:

Event can be any jQuery event such as
click or mouseover. You can also use
your own custom events such as sporty
or foobar. Default is to wait until
user scrolls down and image appears on
the window. To prevent all images to
load until their grey placeholder
image is clicked you could do:

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

In this case is clicking the image, but how can I trigger the image load by clicking other element rather than the image itself (say an anchor link/button)?

Answer 1

The demo page of jQuery Lazy Load plugin doesn’t seem to work to me on FF3.6 on Mac. I was watching the HTTP requests with the Net tab of Firebug and I could see all the images loaded onload.

Maybe it’s worth it to check out this plugin called JAIL that works perfectly. If you look at the example2 it’s similar to what your looking for.

Your HTML can look like:

<img name="img/grey.gif" src="/global/images/blank.gif" width="width" height="height"/>

<a href"clickable">Click here to load the image</a>

and after you import the plugin, you can call the function in this way:

$('img').jail({
     event : "click", 
     selector : "a.clickable"
};