Firefox 无法正确处理 jQuery $(window).load答案

【问题标题】：Firefox does not handle jQuery $(window).load properlyFirefox 无法正确处理 jQuery $(window).load
【发布时间】：2013-12-26 18:24:38
【问题描述】：

有一个带背景的 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);
   });
});

【问题讨论】：

注意：只有当 bg.jpg 没有被缓存时才会发生这种情况，即在点击 ctrl+f5 或第一次访问页面之后
你必须等待bg图像加载。 $('img').load()。在加载图像之前加载窗口。
JSFiddle？您可以添加 console.log 以查看它没有命中的地方吗？
很高兴看到一个 js 用真实的图像和内容来复制问题。这样更容易诊断。因为，老实说，这可能与图像文件大小、文本颜色、浏览器事件处理之间的差异等有关。如果不看就很难确定这一点。
jsfiddle.net/M3AF5/1 但在 JSFiddle 中不可重现...

标签： javascript jquery html css firefox

【解决方案1】：

似乎文本正确淡入，只是背景图像突然弹出，因为它没有被缓存并且在加载之前启动了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 上也无法正常工作。）

【讨论】：