回忆窗口加载事件 - JavaScript [英] Recall window load event - javascript
问题描述
我将尽我最大努力清楚地解释我的问题，而不使用jsfiddle，因为 $（window）.on（load）不会在它们的IDE中激活。
我有一个html包装器，可以将（ajax）html动态加载到 div.content 。
< body>
< div class =header>< / div>
< div class =overlay>< / div>
< div class =loader hiddenalign =center>
< img src =images / loading.gif/>
< / div>
<！ - 内容容器 - >
< div class =content>
<！ - 动态内容出现在这里 - >
< / div>
< div class =footer>< / div>
< / body>
在加载新内容的开始处，我切换加载gif和内容分区。
$（。content）。toggleClass（hidden，true）;
$（。loader）。toggleClass（hidden，false）;
在加载/ ajax过程结束时，我有以下代码：
$（。content）。load（screens /+ this.currentScreen +/+ this.currentScreen +.html .screen ，函数（response，status，xhr）
{
//其他代码
//
//
$（window）.on（load，function （）
$（。content）。toggleClass（hidden，false）;
$（。loader）。toggleClass（hidden，true）;
} ）;
}）;
我选择了 $（window）.on（load code>，因为我只想在所有图像加载完成后再次可见 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）;
}
另外，我向所有人保证，它不是被加载的内容，因为如果我用 $（document）.ready（）替换 $（window）.on（load）工作正常。
我该如何做到这一点？
窗口的加载事件只执行一次。即使您动态添加内容，也不会被触发。这种行为确实不同于 ready（），其中jQuery将始终调用回调，即使文档在第一次遇到此代码时已准备就绪。
当动态添加内容时，如果内容的所有图像都已加载，则不会有单行程进行回调运行。您需要编写的代码必须为每个加载的图像捕获 load 事件，并查看哪一个是最后一个，同时照顾没有加载的图像（因为引用无效，或者它们被缓存）。
图片加载插件提供了一种完成所有功能的方法。你可以像这样使用它：
$（function（）{
$（。content）。load （screens /+ this.currentScreen +/+ this.currentScreen +.html .screen，function（response，status，xhr）
{
// other code
/ /
//
$（。content）。imagesLoaded（function（）{
// images加载了
$（。content）。toggleClass（hidden ，false）;
$（。loader）。toggleClass（hidden，true）;
}）;
}）;
}）;
所以我建议只包含这个插件，像这样：
< script src =https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js>
< / script>
并使用 imagesLoaded（）像上面的代码一样。
I am going to do my best here to distinctly explain what my issue is without the use of jsfiddle because $(window).on("load") does not fire within their IDE.
I have a html 'wrapper' which dynamically loads (ajax) html into 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>
At the start of a new piece of content being loaded, I toggle the visibility between the loading gif and the content div.
$(".content").toggleClass("hidden", true);
$(".loader").toggleClass("hidden", false);
At the end of the loading /ajax process I have the following code:
$(".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);
});
});
I chose $(window).on("load") because I only want div.content to be visible again once all the images have finished loading, as opposed to $(document).ready().
For the first piece of content to be loaded, this works perfectly. However for the second piece of content, the $(window).on("load") event never fires.
I have a hunch that this event is not allowed to be invoked a second time, or maybe it is unbound after being called?
I tried triggering / invoking the method but to no avail.
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");
}
Also, I assure everyone that it isn't the content being loaded, because if I replace $(window).on("load") with $(document).ready() it works fine. I just desperately want to wait for the new images to have loaded.
How can I achieve this?
The window's load event only executes once. Even when you dynamically add content, it will not be triggered. This behaviour is indeed different from ready(), where jQuery will call the callback always, even if the document is ready when it meets this code for the first time.
When adding content dynamically there is no "one-liner" to get a callback run when all images of that content have been loaded. The code you would need to write, would have to capture the load event for every image you load, and see which one was last, also taking care of images that did not load (because of an invalid reference, or they were cached).
The ImagesLoaded Plug-in provides a method that does all that. You can use it like this:
$(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);
});
});
});
So I would suggest to just include that plug-in, like this:
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js">
</script>
and use the imagesLoaded() method, like above code.
这篇关于回忆窗口加载事件 - JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
