Fatal编程技术网

调用窗口加载事件-javascript

javascript jquery html ajax

调用窗口加载事件-javascript,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,在这里，我将尽最大努力清楚地解释在不使用JSFIDLE的情况下我的问题是什么，因为$（window.on（“load”）不会在他们的IDE中触发 我有一个html“包装器”，可以将（ajax）html动态加载到div.content <body> <div class="header"></div> <div class="overlay"></div> <div class="loader hidden" align="ce

在这里，我将尽最大努力清楚地解释在不使用JSFIDLE的情况下我的问题是什么，因为
$（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>
在加载/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（）

对于要加载的第一个内容，这非常有效。但是，对于第二部分内容，
$（窗口）.on（“加载”）
事件从不触发

我有一种预感，这个事件是不允许被再次调用的，或者它在被调用后是未绑定的

我尝试触发/调用该方法，但没有成功

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将始终调用回调，即使文档在第一次遇到此代码时已准备就绪

动态添加内容时，在加载该内容的所有图像后，没有“一行程序”可以运行回调。您需要编写的代码必须为您加载的每个图像捕获
load
事件，并查看哪一个是最后一个，同时还要处理未加载的图像（因为引用无效，或者它们被缓存）

提供了一种实现所有这些功能的方法。您可以这样使用它：

$(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>
因此，我建议只包括该插件，如下所示：

$(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（）
方法，就像上面的代码一样。

非常有趣，我会立即检查这个。-谢谢你的回答。我暂时被调到了另一个任务上——我会在接下来的几个小时内知道的。干杯，很好用。我将更新我的答案以显示修复。谢谢，不客气。请注意，您实际上不需要在问题中提及修复。读者无论如何都会滚动到接受的答案。我通常不会更新我的问题以反映答案，但在这种情况下，我认为这可能是必要的，因为仍然需要
$（document）.ready（{}）函数，如更新中所示。