預先載入圖片

標籤：style   blog   ar   io   color   使用   sp   for   on   

1 //定義預先載入圖片列表的函數(有參數)  2 jQuery.preloadImages = function(){3   //遍曆圖片4   for(var i = 0; i<arguments.length; i++){5     jQuery("<img>").attr("src", arguments[i]);6   }7 }8 // 你可以這樣使用預先載入函數9 $.preloadImages("images/logo.png", "images/logo-face.png", "images/mission.png");

我可以用預先載入的方法，做一些單頁面圖片量比較大的網站，比如一些電商網站，如果一次性載入所有圖片，會影響載入速度，這樣會造成使用者體驗很差。
我們可以用上面的預先載入函數處理這個問題。

邏輯：

1.首次載入頁面，傳入一部分參數（這裡的參數就是圖片路徑）；

2.當視窗視圖滑動到上次載入的最後一張圖片時，再傳入另一部分參數；

3.這樣反覆傳遞參數，只要使用者視窗視圖到達上一次傳入圖片的最後時，就傳遞下一次要載入的參數；

4.這樣就不會造成不必要的資源浪費（沒必要一次性載入所有圖片，有可能使用者不會瀏覽所有圖片）；

 

預先載入圖片