原生js开发，无依赖、轻量级的现代浏览器图片懒加载插件，适合在移动端开发使用
优势
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
github: https://github.com/lzxb/lazy-load-img
原生js开发，无依赖、轻量级的现代浏览器图片懒加载插件，适合在移动端开发使用的更多相关文章
- jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明
jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...
- JS实现图片懒加载插件
一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...
- Js 之图片懒加载插件
一.PC端(lazyload) 1.引入js文件 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.m ...
- 图片懒加载插件echo.js——改造
今天做一个列表项需要用到懒加载,搜到网友推荐的echo.js,试用了一下,还不错.除了懒加载,还提供了throttle——节流,即用户快速滑动列表时,很快滑过的项的图片不会加载,只会加载最后停下来的位 ...
- 图片懒加载插件lazyload.js详解
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- jQuery懒加载插件jquery.lazyload.js使用说明实例
jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...
- 页面性能优化-原生JS实现图片懒加载
在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...
- 原生js实现图片懒加载+加入节流
这两天在学习图片的懒加载实现,看了很多大佬的博客,终于有了点成果.现在用了其中一位大佬的文章中的代码实现了图片懒加载并且在其基础上加入了节流函数. 原理就不多讲了,有需要的可以去大佬的文章看看.大佬文 ...
- js原生图片懒加载 或 js原生图片预加载，html标签自定义属性
使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...
随机推荐
- Selenium 3----设置元素等待
在做Web应用的自动化测试时,定位元素必不可少,这个过程经常出现定位不到元素的情况,常见原因有哪些呢? 1.描述错误 提高编写水平.细心 2.Frame/Iframe框架原因 在元素所在框架里定位该元 ...
- js_2_逻辑分支
- ASP.NET Core 问题排查：Request.EnableRewind 后第一次读取不到 Request.Body
实际应用场景是将用户上传的文件依次保存到阿里云 OSS 与腾讯云 COS ,实现方式是在启用 Request.EnableRewind() 的情况下通过 Request.Body 读取流,并依次通过 ...
- Dynamics365 WebAPI ADFS token 获取
public class CrmAuth { ///<summary> /// Token /// </summary> public string access_token ...
- 解决vue webApp使用lib-flexible和px2rem引用第三方ui库后，样式变小问题
首先,需要卸载项目中的postcss-px2rem. npm uninstall postcss-px2rem --save-dev 其次,安装postcss-px2rem-exclude npm i ...
- selenium如何操作HTML5的画布canvas上的元素
话不多少,上图如下,下图红色框内是一个html5的画布,我们要像操作右上角的保存和数据视图的时候是无法公共selenium的普通定位操作到的,那该怎么办呢? 我们先new一个Selenium的acti ...
- appium api笔记
打印上下文driver.contexts打印当前上下文driver.contextdriver.current_context切换上下文driver.switch_to.context('WEBVIE ...
- nanoPI编译内核的一些record
我用的nanopi型号为 nanopi NEO,本来想拿来跑一跑需要usb串口读数据的golang程序,NEO居然没有该内核驱动的配置. 官方wiki:http://wiki.friendlyarm. ...
- oo第三次总结
一．(1)规格化设计的大致发展历史 20世纪60年代,随着大容量.高速度的计算机出现,以及大量语言的新增和软件的不可靠,爆发了所谓的“软件危机”.而针对这个问题,人们提出了规格化设计的解决方法.通过把 ...
- Express全系列教程之(三)：get传参
一.关于get请求 一般在网站开发中,get都用作数据获取和查询,类似于数据库中的查询操作,当服务器解析前台资源后即传输相应内容:而查询字符串是在URL上进行的,形如: http://localhos ...