背景图像的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

问题是图像在脚本之前加载。因此，当您为镜像加载事件绑定一个eventhandler时，镜像已经被加载，并且该事件没有被触发。

您应该在窗口加载时执行函数，而不是在文档准备就绪时执行：

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

Answer 2

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

因此，您可能会遇到这样的情况:当.ready事件触发时，您的图像有时还没有加载。

请尝试改用.load事件。

Answer 3

.ready()的全部意义在于，一旦“完全构造了DOM层次结构”，您的代码就会启动。由于您正在等待一个图像，这正是您不想要的。jQuery.load()“在图像等所有资产完全收到之前不会被触发”，因此请将.load语句移出文档ready。