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);