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

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

懶加載使用：

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=“lazy”;圖片地址必須放在data-original屬性上，不必寫src屬性，進行圖像插件捆綁。代碼如下：

1
<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />
3.最后調用執行lazyload()函數；

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

? ? ?懶加載默認的是，srcoll事件觸發，頁面滾動的時候，當圖片出現在視野中時加載，不滾動不加載；有時候我們需要當頁面加載完成時，不用滾動，立即執行加載顯示圖片，這時候我們就可以給懶加載綁定“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>

轉載于:https://my.oschina.net/u/3042303/blog/850140

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。