我怎樣才能顯示加載GIF，直到整個HTML頁面已被加載

我有一個網頁是非常密集的通過HTML和CSS，這導致一些元素加載速度比其他用戶訪問該頁面時更快。背景可能需要一段時間來加載，等等......它看起來很難看到它全部加載元素...我怎樣才能顯示加載GIF，直到整個HTML頁面已被加載

所以我想知道如何加載一個不同的頁面（page1，只是一個gif和最小的html），然後page2（帶有密集html的頁面）只有在客戶端的瀏覽器已經獲取所有頁面html後纔會出現。

我相信這可以與jQuery，我幾乎一無所知做...

任何意見，將不勝感激，謝謝，

來源

2014-03-02 Ilan Kleiman

您可以使用[Blockui]（http://malsup.com/jquery/block/）。做所有的工作。 –

在頁面1上執行'setTimeout（function（）{window.location ='page2.html'}，10000）;'這將解決它。 – adeneo

loading stuff here

'，然後一些jquery將'.load（）'真實的內容轉換爲#realbody並隱藏＃加載完成。 –

使用以下HTML：

<div id="loading"></div>

而這個CSS：

#loading { 
    position: absolute; width: 100%; height: 100%; background: url('spinner.gif') no-repeat center center; 
}

而下面的jQuery：

$(window).ready(function() { 
    $('#loading').hide(); 
});

此外，您還可以使用http://webcodertools.com/imagetobase64converter您的GIF變換成基64字符串，並用它來代替spinner.gif。

來源

2014-03-02 18:53:42 Toothbrush

@Shortland好吧，你不能在加載進度條之前顯示一個進度條:) – Cristy

@Cristy我添加jQuery之前發佈了評論，刪除， –

並且，謝謝，這個工程很好，將查看與圖像base64 。 –

<div id="overlay"></div> 
<style> 
    #overlay { 
     position: fixed; 
     background: rgba(0,0,0,0.8); 
     width: 100%; 
     height: 100%; 
     top: 0; 
     left: 0; 
    } 
    .hide { 
     display: none; 
    } 
</style> 
<script> 
    $(window).load(function() { 
    $('#overlay').addClass('hide'); 
    }); 
</script>

來源

2014-03-02 18:56:26

這與其他答案几乎完全相同 – Zarathuztra

@Zarathuztra我從來沒有見過那..只有2分鐘的差距..可能我們都在同一時間寫作。 –

不用擔心，只是想我會指出。 – Zarathuztra

我怎樣才能顯示加載GIF，直到整個HTML頁面已被加載

回答

相關問題