我将在这里尽我最大的努力在不使用 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 () 它工作正常。我只是拼命地等待加载新图像。
我怎样才能做到这一点？
最佳答案
窗口的加载事件只执行一次。即使你动态添加内容，它也不会被触发。此行为确实不同于 ready()，其中 jQuery 将始终调用回调，即使文档在第一次遇到此代码时已准备就绪。
当动态添加内容时，没有“单线”来在该内容的所有图像都已加载后运行回调。您需要编写的代码必须为您加载的每个图像捕获 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 - 调用窗口加载事件 - javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37314240/