JS實現移動端圖片延遲加載

圖片延遲加載常見的有，jquery.lazyload.js，原生JS實現的echo.js。可是都是必須給圖片設置寬高。

由於項目是移動端，並且沒法在加載前知道圖片的寬高，因此，只好本身寫了一個。

既然沒法按照高度來計算是否在可視區內加載。那我就按照個數加載，每次加載X張圖片，滾動到底部的時候再加載X張。若是圖片高度比較小，X張加載後圖片沒有滿屏，那麼就再執行一次加載。

Example：http://www.yc.cn/app/commonweal/

 

使用方法

原生JS：

var lazyPhoto = new lazy(".photo-list img");

或者

var lazyPhoto = new lazy(".photo-list img", {
    size: 3,
    attr: "data-original",
    callback: function () {
        //console.log("加載完了");
    }
});

 

jQuery、Zepto：

$(".photo-list img").lazy({
    size: 3,
    attr: "data-original",
    callback: function () {
        //console.log("加載完了");
    }
});

 

 

20160122更新，添加jQuery、Zepto支持

/**
 * lazy.js
 * Version: 1.1
 * 圖片延遲加載
 * Created by 趙小磊 on 2016/1/22.
 */

(function ($, window, document, undefined) {
    var lazy = function (elem, options) {
        var photos = typeof elem == "string" ? document.querySelectorAll(elem) : elem,
            len = photos.length,
            options = options || {},
            size = options.size || 5,
            attr = options.attr || "data-original",
            callback = options.callback || "",
            page = 0;
        function loadPhoto() {
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop,
                docHeight = document.body.scrollHeight,
                winHeight = document.documentElement.clientHeight,
                i = 0,
                sum = 0;
            if (scrollTop + winHeight >= docHeight - 50) {
                page++;
                sum = size * page;
                for (i; i < sum; i++) {
                    if (i < len) {
                        var photo = photos[i],
                            photoSrc = photo.getAttribute(attr);
                        if (photoSrc) {
                            photo.src = photoSrc;
                            photo.removeAttribute(attr);
                            if (i == sum - 1) {
                                photo.onload = function () {
                                    if (docHeight <= winHeight) {
                                        loadPhoto();
                                    }
                                }
                            }
                            if (callback && i == len - 1) {
                                callback();
                            }
                        }
                    }
                }
            }
        }
        window.addEventListener("load", loadPhoto, false);
        window.addEventListener("scroll", loadPhoto, false);
        window.addEventListener("touchmove", loadPhoto, false);
    };
    window.lazy = lazy;
    if (typeof $ != "undefined") {
        $.fn.lazy = function(options) {
            return lazy(this, options);
        };
    }
})(window.jQuery || window.Zepto, window, document);

 

2016/1/15上傳1.0

/**
 * lazy.js
 * 圖片延遲加載
 * Created by 趙小磊 on 2016/1/15.
 */

(function (window, document) {
    var lazy = function (elem, options) {
        var photos = typeof elem == "string" ? document.querySelectorAll(elem) : elem,
            len = photos.length,
            options = options || {},
            size = options.size || 5,
            attr = options.attr || "data-original",
            callback = options.callback || "",
            page = 0;
        function loadPhoto() {
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop,
                docHeight = document.body.scrollHeight,
                winHeight = document.documentElement.clientHeight,
                i = 0,
                sum = 0;
            if (scrollTop + winHeight >= docHeight - 50) {
                page++;
                sum = size * page;
                for (i; i < sum; i++) {
                    if (i < len) {
                        var photo = photos[i],
                            photoSrc = photo.getAttribute(attr);
                        if (photoSrc) {
                            photo.src = photoSrc;
                            photo.removeAttribute(attr);
                            if (i == sum - 1) {
                                photo.onload = function () {
                                    if (docHeight <= winHeight) {
                                        loadPhoto();
                                    }
                                }
                            }
                            if (callback && i == len - 1) {
                                callback();
                            }
                        }
                    }
                }
            }
        }
        window.addEventListener("load", loadPhoto, false);
        window.addEventListener("scroll", loadPhoto, false);
        window.addEventListener("touchmove", loadPhoto, false);
    };
    window.lazy = lazy;
})(window, document);