召回窗口加载事件-JavaScript
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了召回窗口加载事件-JavaScript，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2451字，纯文字阅读大概需要4分钟。
内容图文
我将尽力在这里清楚地解释不使用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/imagesloaded@4.1/imagesloaded.pkgd.min.js">
</script>
并像上面的代码一样使用imagesLoaded()方法.
内容总结
以上是互联网集市为您收集整理的召回窗口加载事件-JavaScript全部内容，希望文章能够帮你解决召回窗口加载事件-JavaScript所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。