召回窗口加载事件-JavaScript

我将尽力在这里清楚地解释不使用jsfiddle的问题,因为$(window).on(“ load”)不会在其IDE中触发.

我有一个html’包装器’,可将ajax动态加载到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(),它将正常工作.我只是拼命想等待新图像加载完毕.

我该如何实现？

解决方法:

窗口的加载事件仅执行一次.即使您动态添加内容,也不会触发它.这种行为确实不同于ready(),在这种情况下,即使文档初次遇到此代码时jQuery已准备就绪,jQuery也会始终调用该回调.

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

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/[email protected]/imagesloaded.pkgd.min.js">
</script>

并像上面的代码一样使用imagesLoaded()方法.

召回窗口加载事件-JavaScript

相关推荐