回忆窗口加载事件- javascript
在这里，我将尽我最大的努力，清楚地解释我的问题是什么，而不需要使用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()，它工作得很好。我只想等待新的图像加载。
我怎样才能做到这一点？
回答 1
Stack Overflow用户
发布于 2016-05-19 05:33:36
窗口的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()方法，类似于上面的代码。
https://stackoverflow.com/questions/37314240
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号