优势
1.原生js开发，不依赖任何框架或库
2.支持将各种宽高不一致的图片，自动剪切成默认图片的宽高
比如说你的默认图片是一张正方形的图片，则各种宽度高度不一样的图片，自动剪切成正方形。
完美解决移动端开发中，用户上传图片宽高不一致而导致的图片变形的问题
3.简洁的API，让你分分钟入门！！！
代码如下【默认模式，不对图片进行剪切】：<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
<title>默认模式，不对图片进行剪切</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
} img {
border: none;
width: 100%;
} .success {
-webkit-animation: fadeIn 01s ease 0.2s 1 both;
animation: fadeIn 1s ease 0.2s 1 both;
} @-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
} @keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head> <body>
<ul id="list">
<li><img src="./images/default.png" data-src="./images/1.jpg"></li>
<li><img src="./images/default.png" data-src="./images/2.jpg"></li>
<li><img src="./images/default.png" data-src="./images/3.jpg"></li>
<li><img src="./images/default.png" data-src="./images/4.jpg"></li>
<li><img src="./images/default.png" data-src="./images/5.jpg"></li>
<li><img src="./images/default.png" data-src="./images/6.jpg"></li>
<li><img src="./images/default.png" data-src="./images/7.jpg"></li>
<li><img src="./images/default.png" data-src="./images/8.jpg"></li>
<li><img src="./images/default.png" data-src="./images/9.jpg"></li>
<li><img src="./images/default.png" data-src="./images/10.jpg"></li>
<li><img src="./images/default.png" data-src="./images/11.jpg"></li>
<li><img src="./images/default.png" data-src="./images/12.jpg"></li>
<li><img src="./images/default.png" data-src="./images/13.jpg"></li>
<li><img src="./images/default.png" data-src="./images/14.jpg"></li>
<li><img src="./images/default.png" data-src="./images/15.jpg"></li>
<li><img src="./images/default.png" data-src="./images/16.jpg"></li>
<li><img src="./images/default.png" data-src="./images/17.jpg"></li>
<li><img src="./images/default.png" data-src="./images/18.jpg"></li>
<li><img src="./images/default.png" data-src="./images/19.jpg"></li>
<li><img src="./images/default.png" data-src="./images/20.jpg"></li>
<li><img src="./images/default.png" data-src="./images/21.jpg"></li>
</ul>
<script>
/**
* Created by Sorrow.X on 2017/4/27.
*/ ;(function(exports) {
class LazyLoadImg {
constructor() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
this.options = { // 实例的option属性(默认)
el: document.querySelector('body'), // 选择的元素
mode: 'default', // 默认模式，将显示原图，diy模式，将自定义剪切，默认剪切居中部分
time: 300, // 设置一个检测时间间隔
done: true, // 页面内所有数据图片加载完成后，是否自己销毁程序，true默认销毁，false不销毁：FALSE应用场景：页面异步不断获取数据的情况下 需要实时监听则不销毁
diy: { // 此属性，只有在设置diy 模式时才生效
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center'
},
position: { // 只要其中一个位置符合条件，都会触发加载机制
top: 0, // 元素距离顶部
right: 0, // 元素距离右边
bottom: 0, // 元素距离下面
left: 0 // 元素距离左边
},
before: function before(el) {// 图片加载之前，执行钩子函数 },
success: function success(el) {// 图片加载成功，执行钩子函数 },
error: function error(el) {// 图片加载失败，执行的钩子函数 }
};
Object.assign({}, this.options, options);
Object.assign({}, this.options.diy, options.diy);
Object.assign(this.options, options); // 裁切图片用的
this.canvas = document.createElement('canvas');
this.canvas.getContext('2d').globalAlpha = 0.0;
this.images = {}; this._timer = true; // 给实例添加一个_timer属性(定时器)
this.start(); // 开启懒加载程序
} _testMeet(el) { // 每个dom元素,一般img元素
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; // position对象 // 取得元素在可视区的位置（相对浏览器视窗）左右上下
var bcr = el.getBoundingClientRect();
// padding+border+width
var mw = el.offsetWidth; // 元素自身宽度
var mh = el.offsetHeight; // 元素自身的高度
// 包含了导航栏
var w = window.innerWidth; // 视窗的宽度
var h = window.innerHeight; // 视窗的高度 var boolX = !(bcr.right - options.left <= 0 && bcr.left + mw - options.left <= 0) && !(bcr.left + options.right >= w && bcr.right + options.right >= mw + w); // 左右符合条件
var boolY = !(bcr.bottom - options.top <= 0 && bcr.top + mh - options.top <= 0) && !(bcr.top + options.bottom >= h && bcr.bottom + options.bottom >= mh + h); // 上下符合条件
return el.width !== 0 && el.height !== 0 && boolX && boolY;
} _getTransparent(src, w, h) {
if (this.images[src]) return this.images[src];
this.canvas.width = w;
this.canvas.height = h;
var data = this.canvas.toDataURL('image/png');
this.images[src] = data;
return data;
} start() {
var self = this; // LazyLoadImg实例存一下 var options = this.options; // 配置存一下 clearTimeout(this._timer); // 清除定时器
if (!this._timer) return;
// this._timer 是setTimeout的return flag 推荐采用settimeout的方法，而不是setinterval
this._timer = setTimeout(function () {
var list = Array.prototype.slice.apply(options.el.querySelectorAll('[data-src]')); // 获取el下所有含有data-src属性的标签,且转成数组
// 如果list.length为0 且页面内图片已经加载完毕 清空setTimeout循环
if (!list.length && options.done) { // list有数据就不关闭定时器
clearTimeout(self._timer); // 有页面内的图片加载完成了，自己销毁程序
return false;
} else {
list.forEach(function (el) { // 遍历dom
// 如果该元素状态为空（dataset HTML5方法 设置、获取属性）；并且检测该元素的位置
if (!el.dataset.LazyLoadImgState && self._testMeet(el, options.position)) {
self.loadImg(el); // 加载图片
};
});
};
// call it
self.start();
}, options.time);
} loadImg(el) {
var self = this; // 加载图片
var options = this.options; el.dataset.LazyLoadImgState = 'start';
// 执行加载之前做的事情
options.before.call(this, el);
var img = new window.Image();
// 这里是一个坑 dataset.src 实际取的值是 属性data-src data- 是HTML5 DOMStringMap对象
img.src = el.dataset.src; // 图片加载成功
img.addEventListener('load', function () {
if (options.mode === 'diy') {
el.src = self._getTransparent(el.src, el.width, el.height);
options.diy.backgroundImage = 'url(' + img.src + ')';
Object.assign(el.style, options.diy);
} else {
el.src = img.src;
};
delete el.dataset.src;
el.dataset.LazyLoadImgState = 'success';
return options.success.call(self, el);
}, false); // 图片加载失败
img.addEventListener('error', function () {
delete el.dataset.src;
el.dataset.LazyLoadImgState = 'error';
options.error.call(self, el);
}, false);
} destroy() {
// 解除事件绑定,return掉,不会自调用
delete this._timer;
} restart() {
this._timer = true;
this.start();
}
}; exports.LazyLoadImg = LazyLoadImg;
})(window);
</script> <script>
; (function () {
var lazyLoadImg = new LazyLoadImg({
el: document.querySelector('#list'),
mode: 'default', //默认模式，将显示原图，diy模式，将自定义剪切，默认剪切居中部分
time: 300, // 设置一个检测时间间隔
complete: true, //页面内所有数据图片加载完成后，是否自己销毁程序，true默认销毁，false不销毁
position: { // 只要其中一个位置符合条件，都会触发加载机制
top: 0, // 元素距离顶部
right: 0, // 元素距离右边
bottom: 0, // 元素距离下面，传递负数即为预加载
left: 0 // 元素距离左边
},
before: function () { // 图片加载之前执行方法 },
success: function (el) { // 图片加载成功执行方法
el.classList.add('success')
},
error: function (el) { // 图片加载失败执行方法
el.src = './images/error.png'
}
})
// lazyLoadImg.start() // 重新开启懒加载程序
// lazyLoadImg.destroy() // 销毁图片懒加载程序
})()
</script>
</body> </html>
代码如下【自定义模式，设置对图片的剪切规则】：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
<title>自定义模式，设置对图片的剪切规则</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
} img {
border: none;
width: 100%;
} .success {
-webkit-animation: fadeIn 01s ease 0.2s 1 both;
animation: fadeIn 1s ease 0.2s 1 both;
} @-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
} @keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head> <body>
<ul id="list">
<li><img src="./images/default.png" data-src="./images/1.jpg"></li>
<li><img src="./images/default.png" data-src="./images/2.jpg"></li>
<li><img src="./images/default.png" data-src="./images/3.jpg"></li>
<li><img src="./images/default.png" data-src="./images/4.jpg"></li>
<li><img src="./images/default.png" data-src="./images/5.jpg"></li>
<li><img src="./images/default.png" data-src="./images/6.jpg"></li>
<li><img src="./images/default.png" data-src="./images/7.jpg"></li>
<li><img src="./images/default.png" data-src="./images/8.jpg"></li>
<li><img src="./images/default.png" data-src="./images/9.jpg"></li>
<li><img src="./images/default.png" data-src="./images/10.jpg"></li>
<li><img src="./images/default.png" data-src="./images/11.jpg"></li>
<li><img src="./images/default.png" data-src="./images/12.jpg"></li>
<li><img src="./images/default.png" data-src="./images/13.jpg"></li>
<li><img src="./images/default.png" data-src="./images/14.jpg"></li>
<li><img src="./images/default.png" data-src="./images/15.jpg"></li>
<li><img src="./images/default.png" data-src="./images/16.jpg"></li>
<li><img src="./images/default.png" data-src="./images/17.jpg"></li>
<li><img src="./images/default.png" data-src="./images/18.jpg"></li>
<li><img src="./images/default.png" data-src="./images/19.jpg"></li>
<li><img src="./images/default.png" data-src="./images/20.jpg"></li>
<li><img src="./images/default.png" data-src="./images/21.jpg"></li>
</ul>
<script>
/**
* Created by Sorrow.X on 2017/4/27.
*/
;(function(exports) {
class LazyLoadImg {
constructor() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
this.options = { // 实例的option属性(默认)
el: document.querySelector('body'), // 选择的元素
mode: 'default', // 默认模式，将显示原图，diy模式，将自定义剪切，默认剪切居中部分
time: 300, // 设置一个检测时间间隔
done: true, // 页面内所有数据图片加载完成后，是否自己销毁程序，true默认销毁，false不销毁：FALSE应用场景：页面异步不断获取数据的情况下 需要实时监听则不销毁
diy: { // 此属性，只有在设置diy 模式时才生效
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center'
},
position: { // 只要其中一个位置符合条件，都会触发加载机制
top: 0, // 元素距离顶部
right: 0, // 元素距离右边
bottom: 0, // 元素距离下面
left: 0 // 元素距离左边
},
before: function before(el) {// 图片加载之前，执行钩子函数 },
success: function success(el) {// 图片加载成功，执行钩子函数 },
error: function error(el) {// 图片加载失败，执行的钩子函数 }
};
Object.assign({}, this.options, options);
Object.assign({}, this.options.diy, options.diy);
Object.assign(this.options, options); // 裁切图片用的
this.canvas = document.createElement('canvas');
this.canvas.getContext('2d').globalAlpha = 0.0;
this.images = {}; this._timer = true; // 给实例添加一个_timer属性(定时器)
this.start(); // 开启懒加载程序
} _testMeet(el) { // 每个dom元素,一般img元素
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; // position对象 // 取得元素在可视区的位置（相对浏览器视窗）左右上下
var bcr = el.getBoundingClientRect();
// padding+border+width
var mw = el.offsetWidth; // 元素自身宽度
var mh = el.offsetHeight; // 元素自身的高度
// 包含了导航栏
var w = window.innerWidth; // 视窗的宽度
var h = window.innerHeight; // 视窗的高度 var boolX = !(bcr.right - options.left <= 0 && bcr.left + mw - options.left <= 0) && !(bcr.left + options.right >= w && bcr.right + options.right >= mw + w); // 左右符合条件
var boolY = !(bcr.bottom - options.top <= 0 && bcr.top + mh - options.top <= 0) && !(bcr.top + options.bottom >= h && bcr.bottom + options.bottom >= mh + h); // 上下符合条件
return el.width !== 0 && el.height !== 0 && boolX && boolY;
} _getTransparent(src, w, h) {
if (this.images[src]) return this.images[src];
this.canvas.width = w;
this.canvas.height = h;
var data = this.canvas.toDataURL('image/png');
this.images[src] = data;
return data;
} start() {
var self = this; // LazyLoadImg实例存一下 var options = this.options; // 配置存一下 clearTimeout(this._timer); // 清除定时器
if (!this._timer) return;
// this._timer 是setTimeout的return flag 推荐采用settimeout的方法，而不是setinterval
this._timer = setTimeout(function () {
var list = Array.prototype.slice.apply(options.el.querySelectorAll('[data-src]')); // 获取el下所有含有data-src属性的标签,且转成数组
// 如果list.length为0 且页面内图片已经加载完毕 清空setTimeout循环
if (!list.length && options.done) { // list有数据就不关闭定时器
clearTimeout(self._timer); // 有页面内的图片加载完成了，自己销毁程序
return false;
} else {
list.forEach(function (el) { // 遍历dom
// 如果该元素状态为空（dataset HTML5方法 设置、获取属性）；并且检测该元素的位置
if (!el.dataset.LazyLoadImgState && self._testMeet(el, options.position)) {
self.loadImg(el); // 加载图片
};
});
};
// call it
self.start();
}, options.time);
} loadImg(el) {
var self = this; // 加载图片
var options = this.options; el.dataset.LazyLoadImgState = 'start';
// 执行加载之前做的事情
options.before.call(this, el);
var img = new window.Image();
// 这里是一个坑 dataset.src 实际取的值是 属性data-src data- 是HTML5 DOMStringMap对象
img.src = el.dataset.src; // 图片加载成功
img.addEventListener('load', function () {
if (options.mode === 'diy') {
el.src = self._getTransparent(el.src, el.width, el.height);
options.diy.backgroundImage = 'url(' + img.src + ')';
Object.assign(el.style, options.diy);
} else {
el.src = img.src;
};
delete el.dataset.src;
el.dataset.LazyLoadImgState = 'success';
return options.success.call(self, el);
}, false); // 图片加载失败
img.addEventListener('error', function () {
delete el.dataset.src;
el.dataset.LazyLoadImgState = 'error';
options.error.call(self, el);
}, false);
} destroy() {
// 解除事件绑定,return掉,不会自调用
delete this._timer;
} restart() {
this._timer = true;
this.start();
}
}; exports.LazyLoadImg = LazyLoadImg;
})(window);
</script>
<script>
; (function () {
var lazyLoadImg = new LazyLoadImg({
el: document.querySelector('#list'),
mode: 'diy', //默认模式，将显示原图，diy模式，将自定义剪切，默认剪切居中部分
time: 300, // 设置一个检测时间间隔
complete: true, //页面内所有数据图片加载完成后，是否自己销毁程序，true默认销毁，false不销毁
position: { // 只要其中一个位置符合条件，都会触发加载机制
top: 0, // 元素距离顶部
right: 0, // 元素距离右边
bottom: 0, // 元素距离下面，传递负数即为预加载
left: 0 // 元素距离左边
},
diy: { //设置图片剪切规则，diy模式时才有效果
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center'
},
before: function () { // 图片加载之前执行方法
},
success: function (el) { // 图片加载成功执行方法
el.classList.add('success')
},
error: function (el) { // 图片加载失败执行方法
el.src = './images/error.png'
}
})
// lazyLoadImg.start() // 重新开启懒加载程序
// lazyLoadImg.destroy() // 销毁图片懒加载程序
})()
</script>
</body> </html>
vue懒加载js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.LazyLoadImg = factory());
}(this, (function () { 'use strict';
var testMeet = function (el) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
// 取得元素在可视区的位置（相对浏览器视窗）左右上下
var bcr = el.getBoundingClientRect();
// padding+border+width
var mw = el.offsetWidth; // 元素自身宽度
var mh = el.offsetHeight; // 元素自身的高度
// 包含了导航栏
var w = window.innerWidth; // 视窗的宽度
var h = window.innerHeight; // 视窗的高度
var boolX = !(bcr.right - options.left <= 0 && bcr.left + mw - options.left <= 0) && !(bcr.left + options.right >= w && bcr.right + options.right >= mw + w); // 左右符合条件
var boolY = !(bcr.bottom - options.top <= 0 && bcr.top + mh - options.top <= 0) && !(bcr.top + options.bottom >= h && bcr.bottom + options.bottom >= mh + h); // 上下符合条件
return el.width !== 0 && el.height !== 0 && boolX && boolY;
};
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
var createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
var _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
var GetTransparent = function () {
function GetTransparent() {
classCallCheck(this, GetTransparent);
this.images = {};
this.canvas = document.createElement('canvas');
this.canvas.getContext('2d').globalAlpha = 0.0;
}
createClass(GetTransparent, [{
key: 'toBase64',
value: function toBase64(src, w, h) {
if (this.images[src]) return this.images[src];
this.canvas.width = w;
this.canvas.height = h;
var data = this.canvas.toDataURL('image/png');
this.images[src] = data;
return data;
}
}, {
key: 'destroy',
value: function destroy() {
this.images = null;
this.canvas = null;
}
}]);
return GetTransparent;
}();
var LazyLoadImg = function () {
// 构造函数 初始化参数
function LazyLoadImg() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
classCallCheck(this, LazyLoadImg);
this.options = {
el: document.querySelector('body'), // 选择的元素
mode: 'default', // 默认模式，将显示原图，diy模式，将自定义剪切，默认剪切居中部分
time: 300, // 设置一个检测时间间隔
done: true, // 页面内所有数据图片加载完成后，是否自己销毁程序，true默认销毁，false不销毁：FALSE应用场景：页面异步不断获取数据的情况下 需要实时监听则不销毁
diy: { // 此属性，只有在设置diy 模式时才生效
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center'
},
position: { // 只要其中一个位置符合条件，都会触发加载机制
top: 0, // 元素距离顶部
right: 0, // 元素距离右边
bottom: 0, // 元素距离下面
left: 0 // 元素距离左边
},
before: function before(el) {// 图片加载之前，执行钩子函数
},
success: function success(el) {// 图片加载成功，执行钩子函数
},
error: function error(el) {// 图片加载失败，执行的钩子函数
}
};
// 深拷贝 如果都有 则右面的值 option.position会覆盖this.options.position
options.position = _extends({}, this.options.position, options.position);
options.diy = _extends({}, this.options.diy, options.diy);
_extends(this.options, options);
this.start();
}
createClass(LazyLoadImg, [{
key: 'start',
value: function start() {
if (!this._getTransparent) {
this._getTransparent = new GetTransparent();
}
this._timer = true;
this._start();
}
}, {
key: '_start',
value: function _start() {
var _this = this;
var options = this.options;
clearTimeout(this._timer); // 清除定时器
if (!this._timer) return;
this._timer = setTimeout(function () {
var list = Array.prototype.slice.apply(options.el.querySelectorAll('[data-src]'));
if (!list.length && options.done) return clearTimeout(_this._timer);
list.forEach(function (el) {
if (!el.dataset.LazyLoadImgState && testMeet(el, options.position)) {
_this.loadImg(el);
}
});
_this._start();
}, options.time);
}
}, {
key: 'loadImg',
value: function loadImg(el) {
var _this2 = this;
// 加载图片
var options = this.options;
el.dataset.LazyLoadImgState = 'start';
options.before.call(this, el);
var img = new window.Image();
img.src = el.dataset.src;
// 图片加载成功
img.addEventListener('load', function () {
if (options.mode === 'diy') {
el.src = _this2._getTransparent.toBase64(el.src, el.width, el.height);
options.diy.backgroundImage = 'url(' + img.src + ')';
_extends(el.style, options.diy);
} else {
el.src = img.src;
}
delete el.dataset.src;
delete el.dataset.LazyLoadImgState;
return options.success.call(_this2, el);
}, false);
// 图片加载失败
img.addEventListener('error', function () {
delete el.dataset.src;
delete el.dataset.LazyLoadImgState;
options.error.call(_this2, el);
}, false);
}
}, {
key: 'destroy',
value: function destroy() {
// 解除事件绑定
delete this._timer;
this._getTransparent.destroy();
this._getTransparent = null;
}
}]);
return LazyLoadImg;
}();
return LazyLoadImg;
})));
//# sourceMappingURL=lazy-load-img.js.map