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