Jquery：DOM加载后的fadeIn图像。有时工作吗？ [英] Jquery: fadeIn images after DOM has loaded. Works sometimes..?

问题描述

图像加载后，$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ .image_ad）。hide（）。bind（load，function（）{$（this）.fadeIn（400）;}）;
}）;

如果有任何人有任何输入，这将是伟大的。

我写了这个，以避免不必在页面上看到图像加载，相反，当每个图像准备就绪时，我加载的页面就会加载。

问题是有时候几个图像永远不会加载，点击刷新会纠正这一点，但我宁愿完美，并询问是否有任何想法为什么。

我有一种感觉，有时在脚本运行的时候，dom并没有完全加载，我知道它在一个document.ready中，但它可能是可能的..

再次感谢。

---

感谢所有回复！我会在今晚播放片段，并发回我发现有用的。再次，你的答案非常感激。

---

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

  $（document）.ready（function（）{
 $（。gallery_image）。隐藏（）。not（function（）{
 return this.complete&& $（this）.fadeIn（100）; 
}）bind（load，function（） （this）.fadeIn（100）;}）; 
}）; 
  

---

还有一件事，我不喜欢不完整的帖子所以...

我发现这不适用于Firefox 3.6.12 。

我会看看这个。

解决方案

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

尝试排除缓存图像被隐藏：

$ b $（$（$）$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $完成;
}）。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）;}）; 
}）; 
  

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

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

If anyone has any input this would be great.

I wrote this to avoid having to watch images load on the page, I rather the page loaded then when each image is ready they fade in nicely.

The problem is that sometimes a couple of images will never load, hitting refresh will correct this but I would rather get it perfect and ask if anyone has any idea why.

I have a feeling that sometimes the dom hasn't fully loaded by the time the script has run, I know it's in a document.ready but it might be possible..

thanks again.

---

Thanks for all the replies! I'll play with the snippets tonight and post back which I found useful. Again your answers are much appreciated.

---

As seen below, this seems to work very well for my needs. Thanks everyone.

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

---

just one more thing, I dont like incompleted posts so...

I found that this doesnt work in Firefox 3.6.12.

I'll look in to this.

解决方案

I'm guessing it is because the images are cached, so the load never fires.

Try excluding cached images from being hidden:

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

or hide them, but do a fadeIn on the complete ones immediately.

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

这篇关于Jquery：DOM加载后的fadeIn图像。有时工作吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！