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

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