Jquery：DOM 加载后淡入图像。有时有效..？

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.