如何确定仅下载的可见图像完整并在页面中呈现

Question

这里是我可以实现图像延迟加载功能的代码。我需要知道何时只有可见的图像下载完成并在页面中呈现。怎么可能。

这是我的代码

$(document).ready(function () {
$("table[id*=dgImages] img").each(function () {
if($(this).offset().top > $(window).scrollTop() && $(this).offset().top <    $(window).scrollTop() + $(window).height()) {

  // callback on load complete          
  this.onload = function() { 
    alert('this image download complete'); 
    $(this).fadeIn('slow');
  }

  $(this).attr("src", $(this).attr("original"));
  $(this).removeAttr("original");
}
});
});

借助以下代码，我可以确保每个图像下载在客户端完成。

this.onload = function() { 
    alert('this image download complete'); 
    $(this).fadeIn('slow');
  }

所以我需要另一个回调机制，它启动并通知我，只有可见的图像下载完成并在页面中呈现。请讨论这个问题如何实现它。感谢

Answer 1

也许this one帮助你