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

Question

我正在创建一项功能，用户按下按钮(打印时间表)，然后会出现一个弹出窗口，其中有一个页面显示他们的时间表，然后自动出现打印选项。但是，当弹出窗口仍在加载时间表时，我想显示动画 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 动画不会起作用，但它是一个开始。

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

Answer 1

看看 here 上的 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;
}