更快的圖像加載

我想在我的頁面上逐個顯示約5-8張圖像，但是我希望它們預加載一個，而不是每次切換到anohter圖像時加載它們。更快的圖像加載

我已經看到了一些例子，他們對網頁像所有圖像（隱藏）：

<a href=""><img id="img1" src="images/image1.png" class="image" alt="" /></a> 
<a href=""><img id="img2" src="images/image1.png" class="image" alt="" /></a> 
<a href=""><img id="img3" src="images/image1.png" class="image" alt="" /></a>

而且取消隱藏當前圖像。

而我所擁有的是一個圖像，我改變它的src屬性爲th陣列新圖像的路徑。

SwitchNextImage: function(){  
    var theimg=document.getElementById("imgContainer");     

    this.currentIndex = this.currentIndex+ 1 == this.totalImageCount ? 0 : this.currentIndex + 1; 
    theimg.src=this.slideimages[this.currentIndex].src;   
}

第一種方法顯然加載更快。但需要靜態鏈接。
我的問題是如何使我的方法更快加載？

來源

2010-04-05 nemiss

購買更快的互聯網連接？ ;） – knittl 2010-04-05 09:00:52

加載文檔後，您可以使用Image對象創建一個數組。請參閱this article on techrepublic

來源

2010-04-05 09:02:19 knittl

這是我想了解的，如果只是創建一個圖像對象（而不是渲染）它會自動加載？ – nemiss 2010-04-05 09:07:49

是的，這是，請參閱提供的鏈接 – knittl 2010-04-05 09:10:44

您應該查看圖像預加載。你可以實現你想要通過JavaScript什麼通過爲每個圖像創建一個新的圖像對象：

var img = new Image(); 
img.src = "image2.png";

這將獲取圖像，並將其存儲在緩存中，而不在頁面上居然顯示出來，所以當你來切換您的主圖像的src，瀏覽器可以從緩存中獲取它。對所有圖像重複此操作，並且應該設置。

來源

2010-04-05 09:06:27

謝謝你，knittl是第一個回答，所以我會接受他的答案。 – nemiss 2010-04-05 09:16:57

@nemiss：不用擔心:-)這通常是我如何接受答案。 – 2010-04-05 09:18:37

我之前遇到過一個問題，那就是我的圖像廚房每次都會隨機凍結照片。我嘗試了這兩件事，我用一個裝載圖像的數組創建了一個自定義JavaScript，並試用了燈箱庫。速度沒有任何區別。在這兩種情況下，圖像加載緩慢。

我查了一下，發現減緩加載的原因可能是。
- 網絡連接速度緩慢。
- 圖像大小/格式。（JPG建議用於照片）

因此，我做了一些研究，並提出了簡單的解決方案，HQ照片在爲網頁優化時加載更快。這可以用Photoshop完成。

經過優化的照片，質量很好，我的畫廊正在瞬間加載。

來源

2016-02-05 16:57:01 dan

更快的圖像加載

回答

相關問題