700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > JS实现移动端图片延迟加载

JS实现移动端图片延迟加载

时间:2020-09-27 05:46:05

相关推荐

JS实现移动端图片延迟加载

图片延迟加载常见的有,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);

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。