有一个带背景的 div#all，我希望它在 onLoad 中淡入淡出。 Chrome 和 IE 支持 window.load，而 Firefox 不支持。 Firefox 等待 fadeIns 中的时间量 (1500+500) 然后显示内容，没有任何效果
CSS
body {
display: none;
}
#all{
background: url('../bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
HTML
<body>
<div id="all">
All contents here
<div id="home" style="display:none">Content</div>
</div>
</body>
jQuery
$(window).load(function() {
$("body").fadeIn(1500,function(){
$('#home').fadeIn(500);
});
});
最佳答案
似乎文本正确地淡入淡出，只是背景图像突然弹出，因为它没有缓存并且 firefox 在加载之前启动。
从“How can I check if a background image is loaded?”中得到启发
$(window).load(function() {
$('<img/>').attr('src', '../bg.jpg').load(function() {
$(this).remove();
$("body").fadeIn(1500,function(){
$('#home').fadeIn(500);
});
});
});
这样它会在开始淡入之前先等待背景图像加载。
(注意，如果没有图像加载检查，它在 Chrome 上对我来说也不能很好地工作。)
关于javascript - Firefox 无法正确处理 jQuery $(window).load，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20764047/