如何检查窗口是否仍在加载并已完成加载

How do I check if a window is still loading and also finished loading?

本文关键字：加载 已完成 是否 窗口 何检查 检查      更新时间：2023-09-26

>我正在创建一个功能，其中用户按下按钮(打印时间表(，然后出现一个弹出窗口，其中包含显示其时间表的页面，然后打印选项自动出现。但是，当弹出窗口仍在加载时间表时，我想显示动画 GIF。弹出窗口中的时间表不是使用 AJAX 获取的，所以我无法使用 ajax 启动和停止，那么我该怎么做呢？

<input type="button" value="Print Timetable" class="printButton" onclick="window.open(url, ' _parent','height=550, width=800');"/>

这是到目前为止在时间表弹出窗口中发生的情况：

<div id="animated-logo" class="animated-logo">
    <a href="/" title="Print your timetable">Test</a>
</div>
<script  type="text/javascript">
        $('.animated-logo').addClass('logo');
        $('.animated-logo').removeClass('animated-logo');
    if (window.print){ self.print();}
</script>

显然，动画 gif 不会起作用，但它是一个开始。

任何帮助都会很棒。谢谢！

看看jQuery的load()。

.HTML 

 <div id="" class="itm-animated-logo">
        <a href="/" title="Print your timetable">Test</a>
        <div id="time-table">...</div>
    </div>

jQuery

$("#time-table").load(function() {
  $(this).parent().removeClass("itm-animated-logo");
}

.CSS

.itm-animated-logo {background-image: loading.gif;}

因此，当弹出窗口加载(带有类 itm-animated-logo(时，其背景将是loading.gif文件。一旦您的时间表被加载(#time-table(，弹出窗口的类将被删除，背景也将随之删除。

这样做的缺点可能是时间表的某些部分将被加载(因此时间表被加载为块(，在这种情况下，它们将"位于"背景图像的"顶部"。要解决此问题，您可以制作一个额外的div。也许这个解决方案更好：

.HTML 

 <div id="" class="itm-animated-logo">
        <div id="loading"><img src="loading.gif" alt="Loading your time table" height="32" width="32" /></div>
        <a href="/" title="Print your timetable">Test</a>
        <div id="time-table">...</div>
    </div>

jQuery

$("#time-table").load(function() {
  $(this).parent().children("#loading").fadeOut("slow");
}

.CSS

#loading {
   display: block;
   width: 32px;
   height: 32px;
   margin: 50px auto;
   padding: 0;
}
相关文章：