召回窗口加载事件 - javascript

Recall window load event - javascript

本文关键字：javascript 事件 加载 窗口 召回      更新时间：2023-09-26

我将在这里尽我所能，在不使用jsfiddle的情况下清楚地解释我的问题是什么，因为$(window).on("load")不会在他们的IDE中触发。

我有一个html"包装器"，它可以动态加载(ajax(html到div.content中。 

<body>
<div class="header"></div>
<div class="overlay"></div>

<div class="loader hidden" align="center">
    <img src="images/loading.gif" />
</div>
<!-- Container for the content -->
<div class="content">
    <!-- dynamic content appears here -->
</div>

<div class="footer"></div>
</body>

在加载新内容开始时，我在加载 gif 和内容div 之间切换可见性。

$(".content").toggleClass("hidden", true);
$(".loader").toggleClass("hidden", false);

在加载/ajax 过程结束时，我有以下代码：

$(".content").load("screens/"+this.currentScreen+"/"+this.currentScreen + ".html .screen", function( response, status, xhr ) 
{
    //other code 
    //
    //
    $(window).on("load", function() {
        $(".content").toggleClass("hidden", false);
        $(".loader").toggleClass("hidden", true);
     });
 });

我之所以选择$(window).on("load")，是因为我只希望在所有图像完成加载后再次div.content可见，而不是$(document).ready()。

对于要加载的第一条内容，这非常有效。但是，对于第二条内容，$(window).on("load")事件永远不会触发。

我有一种预感，这个事件不允许第二次调用，或者它可能在被调用后被解除绑定？

我尝试触发/调用该方法，但无济于事。

if((window.onload) === null)
{
    $(window).on("load", function() {
        console.log("$(window).on('load') called");
        $(".content").toggleClass("hidden", false);
        $(".loader").toggleClass("hidden", true);
    });
}
else
{
    $(window).trigger("load");
}

另外，我向所有人保证，这不是正在加载的内容，因为如果我用$(document).ready()替换$(window).on("load")，它就可以正常工作。我只是拼命地想等待新图像加载。

我怎样才能做到这一点？

窗口的加载事件只执行一次。即使您动态添加内容，也不会触发它。这种行为确实与 ready() 不同，在 中，jQuery 将始终调用回调，即使文档在第一次遇到此代码时已准备就绪。

动态添加内容时，没有"单行"来获取回调运行，当该内容的所有图像都已加载时。您需要编写的代码必须捕获您加载的每个图像的load事件，并查看哪个是最后一个，还要处理未加载的图像(由于引用无效或它们被缓存(。

ImagesLoaded 插件提供了一种完成所有这些操作的方法。你可以像这样使用它：

$(function () {
    $(".content").load("screens/"+this.currentScreen+"/"+this.currentScreen + ".html .screen", function( response, status, xhr ) 
    {
        //other code 
        //
        //
        $(".content").imagesLoaded( function() {
            // images have loaded
            $(".content").toggleClass("hidden", false);
            $(".loader").toggleClass("hidden", true);
        });
    });
});

所以我建议只包含该插件，如下所示：

<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js">
</script>

并使用 imagesLoaded() 方法，如上面的代码。

相关文章：