Question

我的页面上有一个div，我希望在所有元素（脚本，图片等）完成加载后显示。但似乎onload函数不起作用，因为我可以在加载所有内容之前看到页面。我只有一个js文件链接到我的页面，下面我展示了我如何组织代码（希望它是正确的方式）。我还给页面添加了一个破坏的img链接，以测试函数是否在没有丢失文件的情况下执行，并且确实如此。

HTML

<div id="dvLoading"></div>

CSS

#dvLoading{
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    background: red;
    z-index:9999;
}

JQuery的

var onLoad = function(){
    $(window).load(function(){
        $('#dvLoading').fadeOut(500);
    });
}

var someFunction1 = function(){
    //some function
}
var someFunction3 = function(){
    //some function
}
var someFunction3 = function(){
    //some function
}

$(document).ready(function(){
    onLoad(); 
    someFunction1();
    someFunction2();
    someFunction3();
});

Answer 1

请改为尝试：

$( window ).load(function() {
   $('#dvLoading').show().delay(3000).queue(function(n) {
      $(this).fadeOut("slow").delay(1000); n();
   });
});

<强> CSS

#dvLoading{
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    background: red;
    z-index:9999;
}

您的问题可能是您尝试调用在onload包装中触发document.ready的函数。

编辑

这将显示隐藏的div并在所有资源加载后延迟淡出所需的时间。

示例

JS FIDDLE

Onload函数在加载所有元素之前运行

1 个答案: