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

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 的内容之前加载，我只需要让代码在 400KB 加载之前不会触发。

编辑：

我将这段代码添加到 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

“就绪”事件会在 DOM 构建时触发，但 之前 可能会加载图像等其他内容。如果你想要一个真正的“加载”处理程序，那么就这样做：

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