用JQuery或Javascript預加載網站上的所有圖像

Question

目前我似乎無法找到任何可靠的代碼，但我想知道（如果可能）如何使用JavaScript預加載網頁上的所有圖像或者JQuery，例如。

也許有一個預加載屏幕或覆蓋圖，當圖像被預加載到網站時顯示，然後在完成時淡出或消失。對此的任何幫助/方向都會很棒！

謝謝！

Answer 1

您可以在加載頁面時顯示啓動畫面或加載畫面，然後在JQuery告訴您頁面已完全加載時移除此畫面。類似這樣的：

$(document).ready(function() { 
    // add loader 
}); 

$(window).load(function() { 
    // remove loader 
}); 

Answer 2

你的意思是加載一組圖像（如圖庫？）。如果是這樣，那麼你可以用jQuery來做到這一點。你有沒有簽出Image Loader插件？它看起來像它會做你想要什麼：

http://www.staticvoid.info/imageLoader/

這將是微不足道把一個div在此之上在運行之前，然後在完成（）回調將其刪除。

你可能也想看看這個SO話題，也是關於一個插件會談（這將是您最好的選擇，IMO）：JQuery wait for page to finish loading before starting the slideshow?

Answer 3

這將預裝所有圖像的CSS爲您的網站自動： http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/

我不認爲你應該有一個加載屏幕，因爲這將是非常煩人的用戶。

Answer 4

這是我的預加載器。首先顯示預加載器，當整個頁面加載時，隱藏preloader並顯示內容。試試這個，它非常簡單和容易改變。這是鏈接到我的博客文章演示和代碼（〜1 Kb）： Preload web site using jquery