如何在图片懒加载加载完毕后触发事件？

Question

我有一些需要绝对定位的图片，以便使图片中心位于其父div的中心。 我已经有了完成此操作的代码。

最近我添加了懒加载插件，它的效果符合预期。 但是我需要一种方式在懒加载已加载并淡入图像后触发我的图像居中代码。

我的当前代码基本上是这样：

jQuery(document).ready( function($) {

// Make all lazy images ready to load themselves and listen for a custom event
$("img.lazy").lazyload({ event:"delayed-lazy-load-event", effect : "fadeIn"});

});


// Wait for the iframes and other important junk to finish loading
jQuery( window ).load( function($){

// trigger lazy loading of thumbnails.
$("img.lazy").trigger("delayed-lazy-load-event")
}

我找不到任何有关Lazy Load功能的信息，它允许我设置回调函数在淡入效果运行后运行。

- thinsoldier

Answer 1

我发现这个方法可行：

$('img.lazy').on('appear',function(){
  console.log(this)//fires this function when it appears
});

- Entrabiter

---

不错！我该如何捕获404错误？ - Sajjan Sarkar

这里使用'appear'作为参数正确吗？我感觉它的意思是'出现在视口中'，而不是'图片已经出现'。对我来说，它几乎在脚本加载时立即触发，而不是在图片加载时触发。 - Nathan Hornby

Answer 2

Entrabiter 的回答实际上是为了在图像出现在屏幕上时触发函数，而不是在加载后运行。要在图像加载后（即淡入后）运行一些代码，您需要使用“load”参数：

$('img.lazy').on('load',function(){
  console.log(this)//fires this function when it appears
});

- Nathan Hornby