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

我猜这是因为图像被缓存了，所以加载永远不会触发。

尝试排除隐藏的缓存图像:

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

或隐藏它们，但立即对完整的进行淡入。

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