圖片的延時加載

2024-04-27 15:02:37

字體：大中小

來源：轉載

供稿：網友

對于有較多的圖片的網頁，使用圖片延遲加載，能有效的提高頁面加載速度。這里用的插件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>