Question

 //fade in images after the image has loaded..

$(document).ready(function(){
  $(".image_ad").hide().bind("load", function () { $(this).fadeIn(400); });
 });

如果有人有任何意见，那就太棒了。

我写这篇是为了避免在页面上看图像加载，我宁愿加载页面然后当每个图像准备就绪时它们很好地淡入。

问题是，有时几张图片永远不会加载，点击刷新会纠正这个问题，但我宁愿把它弄得很完美，并询问是否有人知道为什么。

我有一种感觉，有时dom在脚本运行时没有完全加载，我知道它在文档中。但是它可能是..

再次感谢。

感谢所有回复！今晚我会玩这些片段并发回我认为有用的片段。再次，你的答案非常感谢。

如下所示，这似乎对我的需求非常有效。谢谢大家。

$(document).ready(function(){
   $(".gallery_image").hide().not(function() {
       return this.complete && $(this).fadeIn(100);
   }).bind("load", function () { $(this).fadeIn(100); });
});

还有一件事，我不喜欢未完成的帖子......

我发现这在 Firefox 3.6.12 中无效。

我会留意这个。

Answer 1

我猜这是因为图像是缓存的，所以load永远不会触发。

尝试排除隐藏的缓存图片：

$(document).ready(function(){
   $(".image_ad").not(function() {
       return this.complete;
   }).hide().bind("load", function () { $(this).fadeIn(400); });
});

或隐藏它们，但立即对完整的fadeIn进行操作。

$(document).ready(function(){
   $(".image_ad").hide().not(function() {
       return this.complete && $(this).fadeIn(400);
   }).bind("load", function () { $(this).fadeIn(400); });
});

Answer 2

我有一种感觉，有时候当时dom尚未满载脚本已经运行，我知道它在一个 document.ready但它可能是可能..

我认为问题恰恰相反：dom可能在图像出现后已完全加载。因此，当您的加载处理程序被附加时，图像将已经加载并且处理程序永远不会被触发。

您可以通过检查image.complete或通过js插入图像并立即附加加载处理器来解决此问题。

尝试：

$(document).ready(function(){
    $(".image_ad").hide().bind("load", function () { $(this).fadeIn(400); }).each(function() {
        if(this.complete && jQuery(this).is(":hidden")) {
            jQuery(this).fadeIn(400);
        }
    });
});

（或类似的东西）。

Answer 3

不确定这是否有帮助，但您可以通过将此添加到您的css来摆脱hide()来电：

img.image_ad{
  display: none;
}

Answer 4

最好通过css类隐藏图像

.image_ad { display:none; }

然后设置：

$(document).ready(function(){
    $('.image_ad').fadeIn(400);
});

这样做的目的是确保图像隐藏起来，然后一旦收到并加载所有图像，就会淡化图像。

Answer 5

我从另一个论坛上找到的一些代码中调整了这个非常简单的函数。它包含一个回调函数供您在图像加载完毕时使用。虽然它在加载时不会在每个图像中淡入淡出，但是当所述容器中的所有图像都已完成加载时，它会在所有图像中淡入淡出。我相信你可以调整它所需要的代码。

function imgsLoaded(el,f){
  var imgs = el.find('img');
  var num_imgs = imgs.length;

  if(num_imgs > 0){
    imgs.load(function(){
      num_imgs--;
      if(num_imgs == 0) {
        if(typeof f == "function")f();//custom callback
      }
    });
  }else{
    if(typeof f == "function")f();//custom callback
  }
}

用法：

imgsLoaded($('#container'),function(){

$('.image_ad').fadeIn(400);

});

希望这有帮助！

W上。

Jquery：DOM加载后的fadeIn图像。有时工作..？

5 个答案: