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

查看jQuery的load()而不是here。

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;
}

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

1 个答案: