Question

我知道有类似的问题，但答案对我不起作用（下面的例子）。首先，我的（简化）代码。

HTML：

<div id="loading_screen">
    <img src="<?= base_url()?>images/loading_screen.png" title="The game is loading, please wait.."/>
</div>
<div id="container">
    <!-- a whole lot of HTML content here -->
</div>

CSS：

#container{
    display:none;
}

JS：

$(document).ready(function(){
    //when document loads, hide loading screen and show game
    $('#loading_screen').hide();
    $('#container').show();
})

这个想法很简单：我最初显示加载屏幕并隐藏container;一旦所有东西都加载完毕，我就会隐藏加载屏幕并显示容器。

但是，它不起作用。只要container div 开始加载，JS代码就会立即触发显示。

loading_screen div只有1张小图片（20KB），container div总共约400KB。

容器div中有图像，以及某些子元素上的背景图像。因此，根据this question的答案，我将代码更改为$(window).load(function()。但是，这并没有解决问题。

我想我可以执行以下操作 - 首先不创建容器div，只在加载div加载后创建它及其所有内容。但是，我宁愿不去那条路，容器中有服务器端代码，我必须添加包含等，这是不值得的。我很高兴依赖于这个20KB图像将在400KB内容之前加载的事实，我只需要让代码在加载400 KB之后才能启动。

编辑：

我将这段代码添加到JS（在onload函数之外）以查看页面加载时发生的情况：

setInterval(function(){
    var st1 = $('#loading_screen').css("display");
    var st2 = $('#container').css("display");
    console.log(st1+" "+st2);
},100);

它不断输出none block，这意味着loading_screen立即被隐藏，容器立即可见。

Answer 1

您应该看一下这个问题的答案：Detect if page has finished loading

.load() api的jquery页面解释了以下内容：

与图像一起使用时加载事件的注意事项

开发人员尝试使用.load（）快捷方式解决的常见挑战是在图像（或图像集合）完全加载时执行函数。应该注意有几个已知的警告。这些是：


它不能始终如一地工作，也不能可靠地跨浏览器

如果图像src设置为与之前相同的src，则无法在WebKit中正确触发

它没有正确地冒泡DOM树

可以停止触发已存在于浏览器缓存中的图像

完成此示例：示例：在页面完全加载（包括图形）时运行函数。 http://api.jquery.com/load-event/

$(windows).on("load", function() { /// this is deprecated --> $( window ).load(function() {
   // Run a function when the page is fully loaded including graphics.
});

Answer 2

＆＃34;准备好＆＃34;构建DOM时会触发事件，但之前可能会加载其他类似图像的内容。如果你想要一个真正的＆＃34;加载＆＃34;处理程序，然后执行此操作：

$(window).load(function(){ //when document loads, hide loading screen and show game $('#loading_screen').hide(); $('#container').show(); })

jQuery onLoad事件在任何加载之前触发

2 个答案: