用 jQuery preload 預載圖片

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

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

照範例使用就可以了。
  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. });  

留言