一般情況下網(wǎng)頁(yè)中的圖片都是隨文檔流依次加載的，什么時(shí)候用到則什么時(shí)候加載，但是有些時(shí)候這樣的加載方式往往會(huì)影響用戶體驗(yàn)，比如鼠標(biāo)hover變換背景圖片的時(shí)候，只有鼠標(biāo)移入才會(huì)對(duì)變換的圖片進(jìn)行加載，這樣就可能會(huì)出現(xiàn)片刻的加載空白現(xiàn)象；又比如圖片顯示后隱藏再顯示網(wǎng)站內(nèi)容等也是同樣的道理。

為了在必要的時(shí)候增加用戶體驗(yàn)，提高網(wǎng)頁(yè)的交互逼格，這里不得不介紹下圖片預(yù)加載的藝術(shù)啦。

那么什么是圖片預(yù)加載呢？

道理很簡(jiǎn)單啦，雖然某些圖片一時(shí)半會(huì)我用不到，但是為了避免使用時(shí)出現(xiàn)的措手不及的現(xiàn)象，我還是乖乖把它們先準(zhǔn)備好，在某些時(shí)候悄悄的把它們加載進(jìn)來(lái)，以防一時(shí)之需。

ok，那么怎么才能實(shí)現(xiàn)這樣的功能呢？

其實(shí)很簡(jiǎn)單啦，

這里呢就介紹一個(gè)jquery庫(kù)的preLoadImages()函數(shù)，使用這個(gè)函數(shù)呢就可以輕松實(shí)現(xiàn)圖片預(yù)加載了，下面來(lái)一睹為快吧，代碼如下：

1 $(function(){2 var cache=[];3 //編寫一個(gè)預(yù)加載圖片的jQuery函數(shù)4 $.preLoadImages = function(){5 //獲取函數(shù)體的參數(shù)個(gè)數(shù)6 var args_len = arguments.length;7 //反向循環(huán)參數(shù)個(gè)數(shù)，創(chuàng)建img元素8 for(var i = args_len ; i--;) {9 var cacheImage = document.createElement(‘img’); 10 //指定img元素的src屬性為數(shù)組元素的值 11 cacheImge.src = arguments[i]; 12 //將HTML元素加入到數(shù)組中 13 cache.push(cacheImage); 14 } 15 } 16 });

ok，注釋都寫的十分清楚了吧，還是沒(méi)看懂？好吧那么我們先不管代碼了，其實(shí)只要通過(guò)下面一步就可以完成函數(shù)的調(diào)用，如下：

1 //預(yù)加載圖片 2 $.preLoadImages('images/sample1.jpg’,’images/sample2.jpg’,'images/sample3.jpg’);

其中的

'images/sample1.jpg’,’images/sample2.jpg’,'images/sample3.jpg’

就是圖片的路徑，預(yù)加載多張圖片就用逗號(hào)分隔啦，

這樣在網(wǎng)頁(yè)上的任何位置引用圖片時(shí)，將從緩存中獲取所需的圖片，從而提升用戶的體驗(yàn)，使網(wǎng)站獲得更好的流暢性哦。

那么還沒(méi)完，有人可能會(huì)問(wèn)萬(wàn)一圖片路徑失效加載出錯(cuò)了咋辦？

呵呵，再教你一招，出錯(cuò)就出錯(cuò)了唄，我們有plan B，針對(duì)出錯(cuò)的圖片顯示另一張我們事先準(zhǔn)備好的圖片，用這張圖片來(lái)替換所有無(wú)法顯示的圖片，那么怎樣才能做到呢，方法也十分簡(jiǎn)單，代碼如下：

1 $(function(){ 2 $("img").error(function(){ 3 $(this).prop("src","images/planB.jpg"); 4 }); 5 });

搞定，這下我們做的萬(wàn)無(wú)一失了，

這里主要介紹下error()事件，它的定義和用法為：

　　當(dāng)元素遇到錯(cuò)誤(沒(méi)有正確載入)時(shí)，發(fā)生 error 事件。

　　error() 方法觸發(fā) error 事件，或規(guī)定當(dāng)發(fā)生 error 事件時(shí)運(yùn)行的函數(shù)。

很好理解吧，至此我們的圖片預(yù)加載的方法就介紹完了。

本文部分代碼及寫作思路參考于《超實(shí)用的JQuery代碼段》一書，歡迎大家積極嘗試、評(píng)論及指正。

總結(jié)

以上是生活随笔為你收集整理的预加载显示图片的艺术的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。