雞西網站建設制作優化設計[SEO]
本頁定位
在線咨詢

懶加載jquery.lazyload.js詳解 2.x

假裝紳士??1年前 (2018-09-08)1648去下載A+A-

?? ? 軟件著作權歸作者所有;本站所有軟件均來源于網絡,僅供學習使用,請支持正版!

簡介

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

優點

1、它可以提高頁面加載速度;
2、在某些情況清晰它也可以幫助減少服務器負載。

安裝

bower安裝:

$ bower install jquery.lazyload

npm安裝:

$ npm install jquery-lazyload

使用

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

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

1.將圖片路徑寫入data-original屬性
2.給lazyload的圖片增加一個名為lazy的class
3.選擇所有要lazyload的圖片(img.lazy),執行lazyload();

<img class="lazy" data-original="img/example.jpg" style="margin-top:1000px" height="200">
<script>
$(function(){
    $("img.lazy").lazyload();
})
</script>

注意:必須設置圖片的高度或者寬度,否則插件可能無法正常工作

提前加載——Threshold

lazyload默認是當滾動到該圖片位置時,加載該圖片。但是可以通過設置Threshold參數來實現滾到距離其xx px時就加載。

$(function(){
    $("img.lazy").lazyload({
        threshold :20
    });
})

上面的例子設置了滾動到距離圖片20px時,圖片就開始再開始加載。

事件觸發(可以是jquery事件,也可以是自定義事件)——Event

當觸發定義的事件時,圖片才開始加載

$(function(){
    $("img.lazy").lazyload({
        event : "click"
    });
})

上面的例子使圖片點擊后,才開始加載
Tip:你可以使用這個來實現圖片的延遲加載

$(function() {
    $("img.lazy").lazyload({
        event : "sporty"
    });
});

$(window).bind("load", function() {
    var timeout = setTimeout(function() {
        $("img.lazy").trigger("sporty")
    }, 5000);
});

上面的代碼在頁面加載完畢后五秒才開始加載圖片

設定效果——Effects

插件默認的加載效果是 show() ,你可以使用任何你想要的效果。下面的代碼使用了 fadeIn()

$("img.lazy").lazyload({
    effect : "fadeIn"
});

滾動容器內的圖片——container

插件也可以使用在滾動容器內的圖片上。下面的div擁有scrollerbar,內容的內容進行滾動,滾到圖片位置時,圖片開始加載

<div style="height:600px;overflow:scroll" id="container">
    <img class="lazy" data-original="img/example.jpg" alt="" style="margin-top:1000px" height="200">
</div>
<script>
$(function(){
    $("img.lazy").lazyload({
        container: $("#container")
    });
})
</script>

不順序排列的圖片

插件會執行一個尋找未加載圖片的循壞,該循環會檢查圖片是否可見,默認情況下,當第一個視圖外的圖片被找到,循環就會停止 。
但是存在一種情況:頁面布局圖片的順序和html圖片代碼的順序不一致;它會導致本該加載的沒有加載。這種情況下就可以將 failurelimit 設為 10 ,它令插件找到 10 個不在可見區域的圖片是才停止搜索. 如果你有一個惡心的布局, 請把這個參數設高一點。

$("img.lazy").lazyload({
    failure_limit : 10
});

處理隱藏圖片——skip_invisible

為了提升性能,插件默認忽略隱藏的圖片;如果想要加載隱藏圖片.設置skip_invisible為false;
注意:Webkit瀏覽器將自動把沒有寬度和高度的圖像視為不可見

$("img.lazy").lazyload({
    skip_invisible : true
});
資源下載

恭喜,此資源為免費資源,請先

文件版本:2.x

文件大小:<1M

文件語言:jquery插件

更新日期:2018-9-8

系統要求:OS X 10.9 或更高版本

技術交流:QQ群 7717114

全部評論: 0
登錄沒有賬號 切換注冊

忘記密碼 ?

注冊已有賬號 切換登錄

15选5走势图开奖