lazyload js是什么

本篇內(nèi)容主要講解“l(fā)azyload js是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“l(fā)azyload js是什么”吧!

　　lazyload.js用于長頁面圖片的延遲加載，視口外的圖片會在窗口滾動到它的位置時再進行加載，這是與預(yù)加載相反的。

　　lazyload.js優(yōu)點：

　　它可以提高頁面加載速度；

　　在某些情況清晰它也可以幫助減少服務(wù)器負載。

　　lazyload.js安裝:

　　bower安裝：

　　bowerinstalljquery.lazyload

　　npm安裝:

　　npminstalljquery-lazyload

　　lazyload.js使用:

　　lazyload依賴與jquery。所以先引入jquery和lazyload

　　<scriptsrc="jquery.js"></script>

　　<scriptsrc="jquery.lazyload.js"></script>

　　1.將圖片路徑寫入data-original屬性

　　2.給lazyload的圖片增加一個名為lazy的class

　　3.選擇所有要lazyload的圖片（img.lazy），執(zhí)行l(wèi)azyload();

　　<imgclass="lazy"data-original="img/example.jpg"height="200">

　　<script>

　　$(function(){

　　$("img.lazy").lazyload();

　　})

　　</script>

　　lazyload.js如何引用：

　　LazyLoad依賴于jQuery.所以需要引用2個js

　　<scripttype="text/javascript"src="js/jquery.js"></script>

　　<scripttype="text/javascript"src="js/jquery.lazyload.js"></script>

　　注：這里要保證先加載了jquery.js再加載jquery.lazyload.js，這里的順序不只是先后順序。

　　如果jquery.js里面用了defer="defer"或者異步async，jquery.lazyload.js也要對應(yīng)加上，否則會導(dǎo)致jquery.lazyload.js先加載報錯。

到此，相信大家對“l(fā)azyload js是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！