Question

有一个div＃all with background，我想让它淡入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);
   });
});

Answer 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。）

Firefox无法正确处理jQuery $（window）.load

1 个答案: