延迟加载加载图像后如何触发事件？答案

【问题标题】：How can I trigger an event after lazy load has loaded an image?延迟加载加载图像后如何触发事件？
【发布时间】：2014-10-16 03:56:46
【问题描述】：

我有需要绝对定位的图像，以便图像的中心位于其父 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")
}

我找不到任何有关延迟加载的任何功能的信息，这些功能可以让我设置回调函数以在它运行淡入效果后运行。

【问题讨论】：

标签： jquery jquery-lazyload

【解决方案1】：

发现这个工作：

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

【讨论】：

不错！如何捕获 404？
这里的“出现”是正确的论点吗？我有一种感觉，它的意思是“出现在视口中”，而不是“图像已经出现”。对我来说，它几乎是在脚本加载时触发，而不是在图像加载时触发。

【解决方案2】：

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

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

【讨论】：