How can I trigger an image load by clicking other element rather than the image itself (Lazy Load jQuery plugin)?
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 开发者_如何学Can anchor link/button)?
use .trigger()
to fire up the click
event i.e.,
$(function() {
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});
$('#clickme').click(function() {
$('img').trigger('click');
});
});
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"
};
Just another suggestion, I have created a lazy load plugin that will run an event if the element comes into view. It is hooked to the scroll event however by using $.fn.lazyloadanything('load')
it will force all the load events of any elements that are in view. Might not be exactly what you are looking for but might work:
https://github.com/shrimpwagon/jquery-lazyloadanything
精彩评论