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

圣彼得

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

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；加载完所有内容后，我将隐藏加载屏幕并显示容器。

但是，它不起作用。containerdiv开始加载后，JS代码立即触发show 。

该loading_screenDIV只有1小图象（20KB）和containerDIV是一个总的大约400KB的。

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

我想我可以执行以下操作-最初甚至不创建容器div，而仅在加载div加载后创建它及其所有内容。但是，我宁愿不走这条路，容器中有服务器端代码，我必须添加include等，这是不值得的。我很高兴依靠这样一个事实，即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立即隐藏，并且容器立即可见。

罗德里格格

您应该查看以下问题的答案：检测页面是否已完成加载

.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.
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。