jquery圖像預加載器（我如何得到loading.gif看起來更快）

Question

我試圖讓一個jquery圖像預加載器啓動「loading.gif」和圖像預加載區域立即開始頁面打開（如果這甚至是適當的術語），我一直在嘗試使用javascript佈局和其他東西，但總是爲我的口味加載太晚。

這裏是URL

http://eleven23.net/beta/work/web/lounge22-preload.php

有幾個變量，即時通訊與得到它的加載速度更快

一個我應該使用哪種實驗？

$（窗口）.bind（ 「負載」，函數（）{

• 或 -

$（文件）。就緒（函數（）{

此外我已經在</body>之前放置了內嵌javascript，希望也會加速jquery的開始時間。

有什麼建議嗎？

Answer 1

$（document）.ready（）會在DOM加載並準備好被操作時觸發。在這裏添加加載圖片，預加載大圖片，然後再次刪除加載圖片將不會像您想要的那樣真正起作用。

您需要將加載圖像添加到您的標記（所以它立即呈現），然後預加載大圖像，並加載時隱藏/刪除加載圖像。

有一個很好的教程，使用一個簡單的插件預加載圖像 here。

Answer 2

我使用舊式圖像元素來緩存圖像。當他們加載時，我知道他們在瀏覽器緩存中。如果我想確保它們在附近，我堅持使用一個不能超出範圍的數組。

var images = []; 

// Preload a list of images with an optional callback as a final parameter. 
function preload() { 
    if (arguments.length == 0) return; 
    var waiting = arguments.length - 1, 
     count = 0, 
     callback = arguments[ arguments.length - 1 ]; 
    if (typeof callback == "string") { 
     callback = function() { }; 
     waiting++; 
    } 
    function loaded() { 
     if (++count == waiting) callback(); 
    } 
    for (var i = 0 ; i < waiting ; i++) { 
     var image = new Image(); 
     image.onload = loaded; 
     image.src = arguments[ i ]; 
    } 
} 

preload("people.gif", "images/star.jpg", "/site/images/panorama.jpg", function() { 
    doSomethingWithImages(); 
}); 

我很想知道使用圖像元素的任何主要缺點。

我在MDC上找不到Image的原始文檔，但是這裏有一些關於使用Image對象的當代文檔。

https://developer.mozilla.org/en/Canvas_tutorial/Using_images

但是，對象早Canvas和HTML 5.去的方式回來。

https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html

Answer 3

嘿，你可以檢查出一個偉大的jQuery的預加載，我全回調，自動讀取圖像預加載的，很多緩和動畫寫道。看看這裏：jQuery Preloader