Jquery lazyload插件和回调函数

时间:2011-12-19 06:08:06

标签: jquery

我从这个网站http://www.appelsiini.net/projects/lazyload下载了jquery lazyload插件。

从他们的文档中我没有发现可以使用任何回调或不使用lazyload插件。

假设我的HTML看起来像

<div id="gallery" class="busy"><img src="blah.jpg" /></div>
<div id="gallery" class="busy"><img src="blah2.jpg" /></div>
<div id="gallery" class="busy"><img src="blah3.jpg" /></div>

我的脚本

$("#gallery img").lazyload();

class busy只会在div的中心设置一个忙碌的图像。所以我需要一个回调,并且从回调中我需要检测图像下载是否完成,如果已完成,那么我只是从图像标记的相应父div中删除该类。

所以请告诉我使用lazyload实现回调的方法,还需要示例代码,通过该代码我可以从图像标记的相应父div中删除该类。

感谢

2 个答案:

答案 0 :(得分:12)

我有同样的问题。做了一些搜索,来到这里,找到了答案。这是我有的,对我有用:

$(this).lazyload({
    effect : 'fadeIn',
    load : function()
    {
        console.log($(this)); // Callback here
    }
});

希望这有帮助!

答案 1 :(得分:0)

Rick de Graaf的回答几乎为我做了。

我遇到的问题是:还会为占位符图片调用。在我的情况下,这是一个问题。我想只为最终加载的图像添加一个类。我添加了这个以使它适合我:

jQuery("img.lazy").lazyload({   
            effect : 'fadeIn',
            load : function()
            {
                if ( jQuery(this).attr("src") != "data:image/gif;base64,R0lGODlhZABlAIAAAPn5+QAAACH5BAAAAAAALAAAAABkAGUAAAJ0hI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBnZVQAAOw==") {
                    jQuery(this).addClass("visible-image");                 
                }
            }
        });

如果加载的图片是数据:图片,请不要做任何事情,否则请添加我的课程。