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中不起作用。

我会看看这个。

我猜这是因为图像被缓存,所以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); }); }); 

我有一种感觉,有时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); } }); }); 

(或类似的东西)。

不确定这是否有帮助,但你可以通过将它添加到你的css来摆脱hide()调用:

 img.image_ad{ display: none; } 

你最好通过css类隐藏图像

 .image_ad { display:none; } 

然后设置:

 $(document).ready(function(){ $('.image_ad').fadeIn(400); }); 

这将做的是确保图像被隐藏开始,然后一旦收到并加载所有图像,淡入图像。

我从另一个论坛上找到的一些代码中调整了这个非常简单的函数。 它包括一个回调函数,供您在图像加载完毕时使用。 虽然它在加载时不会在每个图像中淡入淡出,但是当所述容器中的所有图像都已完成加载时,它会在所有图像中淡入淡出。 我相信你可以调整它需要的代码。

 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.