如何在加載真正大圖時顯示加載屏幕？

Question

我有一個5MB圖片需要大約2-3分鐘才能加載。當它加載時，我想要有一個加載屏幕。裝入圖像後，加載屏幕將消失。 （該圖像是一個精靈圖像;我使用CSS來分割它）。

如果這是可能的，那我該怎麼辦呢？如果這是不可能的，那麼我還可以使用其他方法來隱藏圖像加載（或降低圖像大小）？

Answer 1

該圖像是一個精靈圖像。

我使用CSS來拆分它們。

除非有額外的信息沒有說明，否則在5MB時你已經擊敗了CSS精靈的任何優點。將其分割成單獨的文件和按需延遲加載。

如果您使用/可以使用jQuery this plugin做得很好，延遲加載。

另外請確保您使用的是最好的compression。即使您必須使用無損壓縮，仍然可以通過從圖像文件中刪除元數據來獲得一些收益。

在Photoshop中「保存爲Web」非常適合平衡有損壓縮（質量與大小）並且還可以選擇不在圖像文件中嵌入元數據。如果您無法訪問Photoshop，則可以使用雅虎SmushIt之類的工具。

Answer 2

只是躲在一些裝載層的頁面/元素和圖像加載後刪除層：

<!-- within you site header --> 
<script type="text/javascript"> 
/* display loader only if JavaScript is enabled, no JS-lib loaded at this point */ 
document.write('<div id="loader" style="display:table; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; background: #fff;">' 
    + '<div style="display:table-cell; vertical-align:middle; text-align: center;">' 
    + 'loading…<br /><img src="icon.load.gif" />' 
    + '</div></div>'); 
</script> 


<!-- at the bottom of you HTML (right before closing BODY-tag) --> 
<script src="jquery.min.js"></script> 
<script type="text/javascript"> 
/* hide the loading-message */ 
$(window).load(function(){ 
    $('#loader').fadeOut(500); 
}); 
</script> 

的技巧是使用$(window).load()作爲事件處理程序，不被解僱，直到所有頁面內容完全加載。