圖片消極式載入

標籤：

對於有較多的圖片的網頁，使用圖片消極式載入，能有效提高頁面載入速度。這裡用的外掛程式Lazy Load

這裡提供教程網站：http://code.ciaoca.com/jquery/lazyload/

這裡只需要引入  jquery-1.11.1.min.js和jquery.lazyload.min.js

注意 ：將真實圖片地址寫在 data-original 屬性中，而 src 屬性中的圖片換成預留位置的圖片（例如 1x1 像素的灰色圖片或者 loading 的 gif 圖片） 添加 class="lazy" 用於區別哪些圖片需要延時載入，當然你也可以換成別的關鍵詞，修改的同時記得修改調用時的 jQuery 選取器，添加width 和height屬性有助於在圖片未載入時沾滿所需的空間。


這樣就可以實現了，是不是很easy。哈哈  

<html><head><meta charset="utf-8"><title>圖片消極式載入 </title></head><body>          <div class="example content">        <img width="765" height="574" alt="BMW M1 Hood" data-original="img/bmw_m1_hood.jpg" src="img/bmw_m1_hood.jpg" style="display: block;">        <img width="765" height="574" alt="BMW M1 Side" data-original="img/bmw_m1_side.jpg" src="img/bmw_m1_side.jpg" style="display: block;">        <img width="765" height="574" alt="Viper 1" data-original="img/viper_1.jpg" src="img/grey.gif"><br>        <img width="765" height="574" alt="Viper Corner" data-original="img/viper_corner.jpg" src="img/grey.gif"><br>        <img width="765" height="574" alt="BMW M3 GT" data-original="img/bmw_m3_gt.jpg" src="img/grey.gif"><br>        <img width="765" height="574" alt="Corvette Pitstop" data-original="img/corvette_pitstop.jpg" src="img/grey.gif"><br>    </div>      <script src="js/jquery-1.11.1.min.js"></script><script src="js/jquery.lazyload.min.js"></script><script>$(function(){  $(‘img‘).lazyload({    effect:‘fadeIn‘,    //event: ‘scrollstop‘,    appear:function(elements_left, settings) {      console.log(‘appear‘);      console.log(elements_left);      //console.log(this, elements_left, settings);    },    load:function(elements_left, settings) {      console.log(‘load‘);      console.log(elements_left);      //console.log(this, elements_left, settings);    }      });});</script></body></html>

　　

圖片消極式載入