通常狀況下網頁中的圖片都是隨文檔流依次加載的,何時用到則何時加載,可是有些時候這樣的加載方式每每會影響用戶體驗,好比鼠標hover變換背景圖片的時候,只有鼠標移入纔會對變換的圖片進行加載,這樣就可能會出現片刻的加載空白現象。javascript
爲了在必要的時候增長用戶體驗,提升網頁的交互逼格,這裏不得不介紹下圖片預加載的藝術。java
那麼什麼是圖片預加載呢?jquery
道理很簡單,雖然某些圖片一時半會咱們用不到,可是爲了不使用時出現的措手不及的現象,咱們仍是須要乖乖地把它們先準備好,在某些時候悄悄地把它們加載進來,以防一時之需。數組
ok,那麼怎麼才能實現這樣的功能?緩存
其實很簡單,這裏就介紹一個jquery庫的preLoadImages()函數,使用這個函數就能夠輕鬆實現圖片預加載。代碼以下:函數
$(function(){
var cache=[];
//編寫一個預加載圖片的jQuery函數
$.preLoadImages = function(){
//獲取函數體的參數個數
var args_len = arguments.length;
// 循環參數個數,建立img元素
for(var i = 0; i < args_len; i++) {
var cacheImage = document.createElement('img');
//指定img元素的src屬性爲數組元素的值
cacheImge.src = arguments[i];
//將HTML元素加入到數組中
cache.push(cacheImage);
}
}
});複製代碼
只要經過下面一步就能夠完成函數的調用,以下:網站
//預加載圖片
$.preLoadImages('images/sample1.jpg', 'images/sample2.jpg', 'images/sample3.jpg');複製代碼
其中的ui
‘images/sample1.jpg’,‘images/sample2.jpg’,‘images/sample3.jpg’this
就是圖片的路徑,預加載多張圖片能夠用逗號分隔,spa
這樣在網頁上的任何位置引用圖片時,將從緩存中獲取所需的圖片,從而提高用戶的體驗,使網站得到更好的流暢性。
這裏還沒完,有人可能會問萬一圖片路徑失效加載出錯了咋辦?
再教你一招,咱們有planB,針對出錯的圖片顯示另外一張咱們事先準備好的圖片,用這張圖片來替換全部沒法顯示的圖片,方法也十分簡單,代碼以下:
$(function(){
$("img").error(function(){
$(this).prop("src","images/planB.jpg");
});
});複製代碼
這下咱們作的萬無一失了,這裏主要介紹下error()事件,它的定義和用法爲:
當元素遇到錯誤(沒有正確載入)時,發生 error 事件。
error() 方法觸發 error 事件,或規定當發生 error 事件時運行的函數。
至此咱們簡單的圖片預加載的方法就介紹完了。
這裏咱們須要區分圖片預加載和懶加載的區別。二者的行爲是相反的,一個是提早加載,一個是遲緩甚至不加載。
本文首發於個人博客:www.cnblogs.com/luozhihao,部分代碼及寫做思路參考於《超實用的jQuery代碼段》一書。