jquery的褪色为背景图像

我有此标记为背景图像：jquery的褪色为背景图像

<img src="bg.jpg" id="bg" alt="">

和此CSS：

#bg { position: fixed; top: 0; left: 0; } 
#bg {display:none;}

和这个jQuery：

$(document).ready(function(){ 
$('#bg').load(function() { 
$(this).fadeIn('slow'); 
}); 
});

基本上它工作，但奇怪的情况是，有时图像加载，有时不，有时我必须刷新页面几次。看看here看看我在说什么。

2011-09-02 alexandru

它每次在Firefox 6.0.1上都能正常工作。 –

看看这个：http://stackoverflow.com/questions/1700864/making-images-fade-in-on-image-load-using-jquery –

可以试试$（window）.load（）...但那么会出现bg的闪光。 – Chris

问题是图像在脚本之前加载。所以，当你绑定图像加载事件的事件处理程序时，图像已经加载并且事件不会被触发。
当窗口负载，而不是当文档准备好你应该执行你的函数：

$(window).load(function(){ 
    $('#bg').load(function() { 
     $(this).fadeIn('slow'); 
    }); 
});

2011-09-02 13:20:19

我使用.load函数，现在它似乎工作正常。 – alexandru

当DOM准备就绪时，会触发$(document).ready()事件，但在保证所有图像都已加载之前。

因此，您遇到的情况可能是，有时您的图像在.ready事件触发时尚未加载。

尝试使用.load事件代替。

2011-09-02 13:19:00

。就绪（）的整点是你的代码将触发一次“的DOM分层已全部构建” 。既然你在等待一个图像，这就是你不想要的东西。 jQuery.load（）“不会被触发，直到所有资产（如图像）都被完全接收”，因此请将.load语句移出doc。

2011-09-02 13:23:11

回答