Jquery Lazyload回调
我目前正在使用Jquery Lazy Load ,我想知道是否有一种方法可以在我的容器中的所有图像结束加载时进行回调(当懒惰加载完成了他所有的魔法时)。
这样做的原因是我也在使用jScrollPane插件 ,我想调用jScrollPane reinitialize函数。
谢谢’
查看源代码,似乎延迟加载插件在加载通过加载的图像元素的图像和几个参数后调用了settings.load
函数:
if (settings.load) { var elements_left = elements.length; settings.load.call(self, elements_left, settings); }
所以你可能需要设置这样的东西:
function yourhandler(element, el_left, settings) { //Whatever you want //This function will be called each time that an image (element in this case) is loaded } $("img.lazy").lazyload({ load : yourhandler });
如果要确保加载图像,可以将监听器附加到加载的图像:
function yourhandler(element, el_left, settings) { element.load(function() { alert('Image Loaded'); }); }
编辑
在尝试代码之后,最“干净”的方法是附加到图像的.load
方法:
$('img.lazy').load(function() { console.log($(this).attr('src') + ' loaded'); }); $('img.lazy').lazyload({ container:$('.p_content'), });
为了处理最后加载的图像并仅运行代码并且只有当它完成时(加载所有图像),你必须使用你的处理函数,正如VAShhh之前所说,不像函数调用应该只发送2个参数,所以这个函数被调用用javascript调用语句。
然后,您将能够成功检索“ elements_left ”参数并将其与0(零)进行比较:最后加载的图像。 像这样的东西:
function yourhandler(elements_left, settings) { var imageNode, container; if(elements_left === 0) { // All images were loaded. // Now do whatever you need with imageNode or its parents (container, etc) in order // to run any other Plugin imageNode = $(this); container = settings.container; alert('Ready to continue! Image node is $(this) and container settings.container'); } }
请在以下url查看此示例: jsfiddle.net/eRyww/4
作为一个替代的答案,我创建了一个“懒加载”插件,可以做到这一点。 它在所有元素加载后提供回调。 它有点不同,并不仅仅适用于图像,但随时可以选择元素进入浏览器视图窗格。