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

創(chuàng)新互聯(lián)公司2013年成立，公司以網(wǎng)站制作、成都做網(wǎng)站、系統(tǒng)開發(fā)、網(wǎng)絡(luò)推廣、文化傳媒、企業(yè)宣傳、平面廣告設(shè)計等為主要業(yè)務(wù)，適用行業(yè)近百種。服務(wù)企業(yè)客戶上千家，涉及國內(nèi)多個省份客戶。擁有多年網(wǎng)站建設(shè)開發(fā)經(jīng)驗。為企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、創(chuàng)意設(shè)計、宣傳推廣等服務(wù)。 通過專業(yè)的設(shè)計、獨特的風(fēng)格，為不同客戶提供各種風(fēng)格的特色服務(wù)。

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

lazyload.js優(yōu)點：

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

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

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是什么”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)建站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

本文題目：lazyloadjs是什么-創(chuàng)新互聯(lián)
鏈接地址：http://chinadenli.net/article22/gcpjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、用戶體驗、企業(yè)建站、外貿(mào)建站、虛擬主機(jī)、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)