2019獨角獸企業(yè)重金招聘Python工程師標準>>>

? 在包含很多大圖片長頁面中延遲加載圖片可以加快頁面加載速度. 瀏覽器將會在加載可見圖片之后即進入就緒狀態(tài). 在某些情況下還可以幫助降低服務(wù)器負擔.

懶加載使用：

1.先在頁面引入jquery.js 和lazyload.js（注意引入順序）

1
2
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>
2.先給需要懶加載的圖片添加類名， 例如class=“l(fā)azy”;圖片地址必須放在data-original屬性上，不必寫src屬性，進行圖像插件捆綁。代碼如下：

1
<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />
3.最后調(diào)用執(zhí)行l(wèi)azyload()函數(shù)；

1
2
3
<script type="text/javascript">
? ? $("img.lazy").lazyload();?
</script>
可以設(shè)置懶加載的觸發(fā)事件：

? ? ?懶加載默認的是，srcoll事件觸發(fā)，頁面滾動的時候，當圖片出現(xiàn)在視野中時加載，不滾動不加載；有時候我們需要當頁面加載完成時，不用滾動，立即執(zhí)行加載顯示圖片，這時候我們就可以給懶加載綁定“sporty”事件，代碼如下：

1
2
3
4
5
6
7
8
9
$(function() {
? ? $("img.lazy").lazyload({
? ? ? ? event : "sporty"
? ? });
});
<a href="www.wfqcp.com/" class="lightblue">濰坊長途汽車站</a>?
?
$(window).bind("load", function() {
? ? var timeout = setTimeout(function(){$("img.lazy").trigger("sporty")},2000);//2秒后自動加載圖片
}); ? <em id="__mceDel" style="background-color: #ffffff; font-family: verdana, Arial, Helvetica, sans-serif; font-size: 14px">　　</em>

轉(zhuǎn)載于:https://my.oschina.net/u/3042303/blog/850140

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的jquery之图片懒加载（总结）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。