對于一些擁有大量圖片的網(wǎng)站來說，如果一個頁面有超過 50 張圖片，就會造成網(wǎng)站頁面加載太慢以及移動端耗費流量太大。為了解決這樣的問題，可以使用LazyLoad按需加載，又稱懶加載。

什么是LazyLoad按需加載

LazyLoad按需加載采用圖片按需加載技術(shù)，打開頁面時只會加載首屏圖片。訪客往下滾動時才會陸續(xù)加載需要展現(xiàn)的圖片，這樣非常高效，體驗舒適。（類似功能：如何實現(xiàn)animate動畫滑動加載網(wǎng)頁）

LazyLoad按需加載實現(xiàn)方法

我們在自己做網(wǎng)站時，也可以實現(xiàn)LazyLoad按需加載，增強網(wǎng)站的用戶體驗。下面學(xué)做網(wǎng)站論壇就來介紹一下LazyLoad按需加載實現(xiàn)方法。（以下會使用到HTML代碼，如果對代碼不熟悉，可以學(xué)習(xí)一下html視頻教程）

1. 引入LazyLoad按需加載必須的二個文件：jquery.js和jquery.lazyload.js。引入方法很簡單，只需將下面的代碼放到</head>標(biāo)簽上方即可；

   
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   
   <script src="https://raw.githubusercontent.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js"></script>
   
   

2. 網(wǎng)站上所有圖片都使用以下的格式書寫：

   
   <img class="lazy" src="" data-original="圖片地址" width="100" height="100" alt="">
   
   

3. 在網(wǎng)站的</body>標(biāo)簽上面，放上以下的JS代碼，來實現(xiàn)LazyLoad按需加載（懶加載）；

   
   <script type="text/javascript">
   
   $(function() {
   
   ?   $("img.lazy").lazyload({
   
   ?       threshold : 200, // 設(shè)置閥值
   
   ?       effect : "fadeIn" // 設(shè)置圖片漸入特效
   
   ?   });
   
   });
   
   </script>
   
   

4. 這樣，我們自己在建網(wǎng)站時，也可以輕松實現(xiàn)LazyLoad按需加載（懶加載）了。快去自己的網(wǎng)站上試試吧！

標(biāo)簽： 代碼 建網(wǎng)站

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。