jquery淡出效果为背景图像

Question

我有背景图片的标记：

<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，看看我在说什么。

Answer 1

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

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

请尝试使用.load事件。

Answer 2

事情是图像在脚本之前加载。因此，当您为图像加载事件绑定事件处理程序时，图像已加载且未触发事件。
您应该在窗口加载时执行您的功能，而不是在文档准备就绪时执行：

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

Answer 3

.ready（）的全部意义在于，“DOM层次结构已完全构建”后，您的代码将触发。由于您正在等待图像，这正是您不想要的。 jQuery.load（）“在完全接收到所有资产（如图像）之后才会被触发”，因此请将.load语句移出doc准备好。