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

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