图片延迟加载常见的有,jquery.lazyload.js,原生JS实现的echo.js。但是都是必须给图片设置宽高。
因为项目是移动端,而且无法在加载前知道图片的宽高,所以,只好自己写了一个。
既然无法按照高度来计算是否在可视区内加载。那我就按照个数加载,每次加载X张图片,滚动到底部的时候再加载X张。如果图片高度比较小,X张加载后图片没有满屏,那么就再执行一次加载。
Example:/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("加载完了"); }});
0122更新,添加jQuery、Zepto支持
/*** lazy.js* Version: 1.1* 图片延迟加载* Created by 赵小磊 on /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);
/1/15上传1.0
/*** lazy.js* 图片延迟加载* Created by 赵小磊 on /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);