如何通过单击其他元素而不是图像本身(Lazy Load jQuery插件)来触发图像加载?

时间:2010-07-15 16:05:18

标签: jquery lazy-loading

Lazy Load插件的文档(仅在事件发生时加载图像的jQuery插件)中说:

  

事件可以是任何jQuery事件,例如   单击或鼠标悬停。你也可以使用   您自己的定制活动,如运动型   或foobar。默认是等到   用户向下滚动并显示图像   窗户。防止所有图像   加载到它们的灰色占位符   点击图片即可:

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

在这种情况下是单击图像,但如何通过单击其他元素而不是图像本身(例如锚链接/按钮)来触发图像加载?

3 个答案:

答案 0 :(得分:3)

使用.trigger()启动click事件,即

$(function() {

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

            $('#clickme').click(function() {
                $('img').trigger('click');
            });
 });

答案 1 :(得分:1)

jQuery Lazy Load plugin的演示页面似乎对Mac上的FF3.6不起作用。我正在使用Firebug的Net选项卡观察HTTP请求,我可以看到加载的所有图像都已加载。

也许值得一试这个名为JAIL的插件,它完美无缺。如果你看一下example2,它与你想要的类似。

您的HTML可能如下所示:

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

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

并在导入插件后,您可以通过以下方式调用该函数:

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

答案 2 :(得分:0)

只是另一个建议,我创建了一个延迟加载插件,如果元素进入视图,它将运行一个事件。它被挂钩到滚动事件但是通过使用$.fn.lazyloadanything('load')它将强制视图中的任何元素的所有加载事件。可能不是你想要的,但可能有用:

https://github.com/shrimpwagon/jquery-lazyloadanything