圖像預加載...最快的方式

我正在處理高流量網頁（真的很高！）的項目。在着陸頁上顯示大量圖像（〜40），這些圖像在頁面加載後通過淡入顯示出來後顯示（〜40）。我們不使用任何庫，因爲它應該在加載之前加載使用。我們有4個圖像服務器。有沒有人有任何經驗是加載圖像的最佳方式？我試過如下：圖像預加載...最快的方式

在頁頭中，<head>之後，插入腳本標籤：

<script> 
    var img = new Image(); img.src= "src of the image"; 
</script>

這樣做，圖像開始和結束以domready中和Load事件之前加載。但是，具有相同網址的網頁上的圖片似乎再次加載，即使它們之前已加載過。網址相同，緩存開啓，Mozilla被使用。

也許有一些機制，防止瀏覽器使用這些圖像？或者是什麼？另一個問題：當DOM和圖像加載並行時，是否會導致任何放緩？

來源

2012-03-07 zak

您是否使用了CDN？ – 2012-03-07 15:30:20

首先，我會推薦使用CSS sprites。你可以在這裏找到更多的信息：

http://www.alistapart.com/articles/sprites

其次，如果要加載的DOM圖像做好準備，使用以下命令：

function listen(event, elem, func) { 
    if (elem.addEventListener) { 
    elem.addEventListener(event, func, false); 
    } else if (elem.attachEvent) { 
    elem.attachEvent('on' + event, func); 
    } 
} 

listen('load', window, function() { 
    var img = new Image(); 
    img.src= "src of the image"; 
});

使用精靈將削減一半的加載時間。您可以消除大部分HTTP請求，精靈表會立即被緩存，因此用戶訪問的每個後續頁面都將加載它。

編輯

這裏的預加載許多圖像的方式：

function preload(images) { 
    if (document.images) { 
    var imageArray = []; 
    imageArray = images.split(','); 
    var imageObj = new Image(); 
    for (var i = 0; i < imageArray.length; i += 1) { 
     imageObj.src = imageArray[i]; 
    } 
    } 
}

調用該函數是這樣的：

preload('image1.jpg,image2.jpg,image3.jpg');

來源

2012-03-07 15:42:00

這個答案不做任何圖像預加載。精靈是一個方向，但我不明白這個答案如何解決預加載問題。 – jfriend00 2012-03-07 15:53:48

我覺得如果圖像在DOM準備好後加載，尤其是在頁面沉重的情況下，您會有更好的用戶體驗。預加載時，您需要用戶等待圖像加載才能查看您的網站。 – 2012-03-07 16:04:03

爲什麼預加載圖像會導致用戶比您的選項等待更長時間？預加載圖像的想法是這樣的，它們可以更快提供，用戶不得不等待較少。頁面的HTML在用戶交互之前不會等待圖像加載。 – jfriend00 2012-03-07 16:06:59

圖像預加載...最快的方式

回答

相關問題