用 jQuery preload 預載圖片

如果網頁上有些圖片一開始是隱藏的，或是需要等讀取才會出現，這樣當圖片開始讀取的時候都會先空白再慢慢出現，這樣對使用者的體驗不是很好，所以如果有需要的話最好是可以讓圖片先讀取進來，這樣等到要圖片顯示的時候，就不用再等圖片讀取了。

簡單的方法直接使用 jQuery.preload 的 plugin 就好了。

照範例使用就可以了。

view plaincopy to clipboardprint

1. var images = [   
2.     'http://farm4.static.flickr.com/3219/2431886567_c92821aede_o.jpg',   
3.     'http://farm1.static.flickr.com/37/85684217_526797a103_o.jpg',   
4.     'http://farm5.static.flickr.com/4080/4906820567_63fb82fa85_b.jpg',   
5.     'http://farm3.static.flickr.com/2652/4112396574_8e9f7d81a1_b.jpg'  
6. ];   
7.   
8. $.preload(images, 1, function(last){   
9.     for (var i = 0; i < this.length; i++) {   
10.         $('<img height="200" src="' + this[i] + '" alt="" />').appendTo('body');   
11.     }   
12.     if (last) {   
13.         alert('All loaded!');   
14.     }   
15. });