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

//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); }); }); 

---

还有一件事，我不喜欢不完整的post所以……

我发现这在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在脚本运行时没有完全加载，我知道它在文档中。但是它可能是有可能的……

我认为问题恰恰相反：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.