jQuery實現圖片預加載提升頁面加載速度和用戶體驗

咱們在作網站的時候常常會遇到這樣的問題：一個頁面有大量的圖片致使頁面加載速度緩慢，常常會出現一個白頁用戶體驗很很差。那麼如何解決這個問題呢？首先咱們會想到的是提升服務器性能，使用靜態緩存等手段來加快圖片的加載速度，這的確是個好方法，不過有時候咱們也能夠從前臺找一些解決的方法，例如插件：jquery.lazyload.js。

下面我來介紹一種在實際應用中常常會使用到的js預加載的方法。

 首先在輸出圖片的時候咱們作一些處理

1 <img data="這裏是咱們要顯示圖片的實際地址" src="這裏是一張默認顯示的小圖片(推薦使用1*1的gif小圖)，能夠快速加載到頁面。能夠是全部圖片使用統一的圖片也能夠是要顯示圖片的縮略圖" alt="圖片名"/>

 

處理完html咱們開始寫js了，在這裏我使用了jquery的類庫

 1 $('img[data]').load(function(){
 2    var __this__ = $(this);
 3    var url = __this__.attr('data');
 4    var src = __this__.attr('src');
 5    if(url ==''|| url == src)//這裏判斷若是圖片實際地址不存在或者已經加載不處理
 6    {
 7         return;
 8    }
 9    var img = new Image();//實例化一個圖片的對象
10    img.src = url;//將要顯示的圖片加載進來
11    if(img.complete)//若是圖片已經加載存在瀏覽器緩存中直接處理
12    {
13        __this__.attr('src',url);//將要顯示的圖片替換過來
14        return;
15    }
16    img.onload =function(){//要顯示的圖片加載完成後作處理
17        __this__.attr('src',url);
18    }
19 
20 });