對于有較多的圖片的網頁,使用圖片延遲加載,能有效的提高頁面加載速度。這里用的插件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>
效果的話,我們可以用360瀏覽器保存網頁圖片功能進行觀看

新聞熱點
疑難解答