Question

我将尽力在这里明确解释我的问题，而不使用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");
}

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

我怎样才能做到这一点？

Answer 1

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

动态添加内容时，没有＆＃34; one-liner＆＃34;在加载该内容的所有图像时获得回调运行。您需要编写的代码必须为您加载的每个图像捕获load事件，并查看哪一个是最后一个，还要处理未加载的图像（由于引用无效，或者它们缓存了。）

ImagesLoaded Plug-in提供了一种方法来完成所有这些工作。您可以像这样使用它：

$(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()方法，如上面的代码。

召回窗口加载事件 - javascript

1 个答案: