如何檢查窗口是否仍在加載並完成加載？

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