對(duì)于一些擁有大量圖片的網(wǎng)站來(lái)說(shuō)，如果一個(gè)頁(yè)面有超過(guò) 50 張圖片，就會(huì)造成網(wǎng)站頁(yè)面加載太慢以及移動(dòng)端耗費(fèi)流量太大。為了解決這樣的問(wèn)題，可以使用LazyLoad按需加載，又稱(chēng)懶加載。

什么是LazyLoad按需加載

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

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

我們?cè)谧约鹤鼍W(wǎng)站時(shí)，也可以實(shí)現(xiàn)LazyLoad按需加載，增強(qiáng)網(wǎng)站的用戶(hù)體驗(yàn)。下面學(xué)做網(wǎng)站論壇就來(lái)介紹一下LazyLoad按需加載實(shí)現(xiàn)方法。（以下會(huì)使用到HTML代碼，如果對(duì)代碼不熟悉，可以學(xué)習(xí)一下html視頻教程）

1. 引入LazyLoad按需加載必須的二個(gè)文件：jquery.js和jquery.lazyload.js。引入方法很簡(jiǎn)單，只需將下面的代碼放到</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)站上所有圖片都使用以下的格式書(shū)寫(xiě)：

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

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

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

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

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

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