Jquery懒加载插件和回调函数

Question

我从这个网站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中删除该类。

谢谢

- Keith Costa

---

你的HTML标记有误，不同的div必须具有唯一的ID。 - Shadow_boi

我问了一个与编程有关的问题：是否有任何回调函数能够在每个图像下载完成时都触发？ - Keith Costa

Answer 1

我有同样的问题。进行了一些搜索，来到了这里，并找到了答案。这是我的解决方法，对我有效：

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

希望这有所帮助！

- Rick de Graaf

---

太棒了！运作顺畅。 - dnns

Answer 2

Rick de Graaf的回答差不多解决了我的问题。

对我来说问题在于：占位图像也会调用Load。这在我的情况下是个问题。我只想为最终加载的图像添加一个类。我加了这个使它对我起作用：

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");                 
                }
            }
        });

如果已加载的图像是“data:image”，则不执行任何操作，否则添加我的类。

- Leopold Kristjansson