实现一个图片懒加载插件有多难? – 前端有多难? – SegmentFault
2016-06-08 11:46
253 查看
Web 图片的懒加载就是通过读取img元素,然后获得img元素的
这里需要注意的是: img在初始化的时候不要设置src属性,因为即使设置
一个简单的图片懒加载共涉及两个方面,
我们首先需要给准备实施懒加载的
src赋值给 data-src属性。
具体示例为:
<img class="m-lazyload" data-src="imgUrl">
动态加载总共分为以下几个步骤,这里每个步骤都将被拆分为独立的函数
1. 添加页面滚动监听事件
window.addEventListener('scroll', _delay, false);
function _delay() {
clearTimeout(delay);
delay = setTimeout(function () {
_loadImage();
}, time);
}
2. 当触发监听事件时会执行
function _loadImage() {
for (var i = imgList.length; i--;) {
var el = imgList[i];
if (_isShow(el)) {
el.src = el.getAttribute('data-src');
el.className = el.className.replace(new RegExp("(\\s|^)" + _selector.substring(1, _selector.length) + "(\\s|$)"), " ");
imgList.splice(i, 1);
}
}
}
虽然执行了
依据就是判断该图片是否在当前窗口的可视区域内,在这里我们封装一个
function _isShow(el) {
var coords = el.getBoundingClientRect();
return ( (coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
}
自此一个图片加载的闭环就形成了
当网页滚动的事件被触发 -> 执行加载图片操作 -> 判断图片是否在可视区域内 -> 在,则动态将
事实就是如此!!!
添加一些自定义参数,谁都喜欢自定义,不是吗?
支持
iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件。
这里我们做了些优化
图片加载后移除选择器,避免重复判断。
缓存img元素结合,减少dom元素查询性能损耗
扩展
OK!说了这么多,show me the code 吧!
(function () {
var imgList = [], // 页面所有img元素集合
delay, // setTimeout 对象
offset, //偏移量,用于指定图片距离可视区域多少距离,进行加载
time, // 延迟载入时间
_selector; // 选择器 默认为 .m-lazyload
function _isShow(el) {
var coords = el.getBoundingClientRect();
return ( (coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
}
function _loadImage() {
for (var i = imgList.length; i--;) {
var el = imgList[i];
if (_isShow(el)) {
el.src = el.getAttribute('data-src');
el.className = el.className.replace(new RegExp("(\\s|^)" + _selector.substring(1, _selector.length) + "(\\s|$)"), " ");
imgList.splice(i, 1);
}
}
}
function _delay() {
clearTimeout(delay);
delay = setTimeout(function () {
_loadImage();
}, time);
}
function ImageLazyload(selector, options) {
var defaults = options || {};
offset = defaults.offset || 0;
time = defaults.time || 250;
_selector = selector || '.m-lazyload';
this.getNode();
_delay();//避免首次加载未触发touch事件,主动触发一次加载函数
if (defaults.iScroll) {
defaults.iScroll.on('scroll', _delay);
defaults.iScroll.on('scrollEnd', _delay);
} else {
window.addEventListener('scroll', _delay, false);
}
}
ImageLazyload.prototype.getNode = function () {
imgList = [];
var nodes = document.querySelectorAll(_selector);
for (var i = 0, l = nodes.length; i < l; i++) {
imgList.push(nodes[i]);
}
};
})();
data-src(也可以约定为其他属性名)属性的值,并赋予
img的src,从而实现动态加载图片的机制。
这里需要注意的是: img在初始化的时候不要设置src属性,因为即使设置
src=''浏览器也会尝试加载图片。
一个简单的图片懒加载共涉及两个方面,
1. HTML 约定
我们首先需要给准备实施懒加载的img元素添加指定的
class这里为
m-lazyload,同时将img
src赋值给 data-src属性。
具体示例为:
<img class="m-lazyload" data-src="imgUrl">
2. JavaScript 实现
动态加载总共分为以下几个步骤,这里每个步骤都将被拆分为独立的函数1. 添加页面滚动监听事件
window.addEventListener('scroll', _delay, false);
function _delay() {
clearTimeout(delay);
delay = setTimeout(function () {
_loadImage();
}, time);
}
2. 当触发监听事件时会执行
_loadImage函数,该函数负责加载图片
function _loadImage() {
for (var i = imgList.length; i--;) {
var el = imgList[i];
if (_isShow(el)) {
el.src = el.getAttribute('data-src');
el.className = el.className.replace(new RegExp("(\\s|^)" + _selector.substring(1, _selector.length) + "(\\s|$)"), " ");
imgList.splice(i, 1);
}
}
}
虽然执行了
_loadImage函数,但是我们得知道哪些图片需要被加载,这里的判断依据是什么呢?
依据就是判断该图片是否在当前窗口的可视区域内,在这里我们封装一个
_isShow函数来实现
function _isShow(el) {
var coords = el.getBoundingClientRect();
return ( (coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
}
自此一个图片加载的闭环就形成了
当网页滚动的事件被触发 -> 执行加载图片操作 -> 判断图片是否在可视区域内 -> 在,则动态将
data-src的值赋予该图片。
太简单了?
事实就是如此!!!
如此简单,不妨扩展一下
添加一些自定义参数,谁都喜欢自定义,不是吗?支持
iScroll,
iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件。
这里我们做了些优化
图片加载后移除选择器,避免重复判断。
缓存img元素结合,减少dom元素查询性能损耗
扩展
prototype添加
getNode方法,支持分页数据懒加载(由于我们之前缓存了dom元素)
OK!说了这么多,show me the code 吧!
(function () {
var imgList = [], // 页面所有img元素集合
delay, // setTimeout 对象
offset, //偏移量,用于指定图片距离可视区域多少距离,进行加载
time, // 延迟载入时间
_selector; // 选择器 默认为 .m-lazyload
function _isShow(el) {
var coords = el.getBoundingClientRect();
return ( (coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
}
function _loadImage() {
for (var i = imgList.length; i--;) {
var el = imgList[i];
if (_isShow(el)) {
el.src = el.getAttribute('data-src');
el.className = el.className.replace(new RegExp("(\\s|^)" + _selector.substring(1, _selector.length) + "(\\s|$)"), " ");
imgList.splice(i, 1);
}
}
}
function _delay() {
clearTimeout(delay);
delay = setTimeout(function () {
_loadImage();
}, time);
}
function ImageLazyload(selector, options) {
var defaults = options || {};
offset = defaults.offset || 0;
time = defaults.time || 250;
_selector = selector || '.m-lazyload';
this.getNode();
_delay();//避免首次加载未触发touch事件,主动触发一次加载函数
if (defaults.iScroll) {
defaults.iScroll.on('scroll', _delay);
defaults.iScroll.on('scrollEnd', _delay);
} else {
window.addEventListener('scroll', _delay, false);
}
}
ImageLazyload.prototype.getNode = function () {
imgList = [];
var nodes = document.querySelectorAll(_selector);
for (var i = 0, l = nodes.length; i < l; i++) {
imgList.push(nodes[i]);
}
};
})();
相关文章推荐
- 按右键另存图片只能存BMP
- photoshop去除图片上的水印
- upload上传单张图片
- 图片引发的溢出危机(图)
- C# WinForm控件对透明图片重叠时出现图片不透明的简单解决方法
- C#实现把彩色图片灰度化代码分享
- C#将图片和字节流互相转换并显示到页面上
- C#监控文件夹并自动给图片文件打水印的方法
- 纯CSS实现的当鼠标移上图片添加阴影效果代码
- 如何使用C#从word文档中提取图片
- C#实现打开画图的同时载入图片、最大化显示画图窗体的方法
- C#图片添加水印的实现代码
- 随鼠标移动的图片或文字特效代码
- CSS 图片横向排列实现代码
- C#实现将Email地址转成图片显示的方法
- C#实现图片加相框的方法
- 超级经典一套鼠标控制左右滚动图片带自动翻滚
- 用css实现图片垂直居中的使用技巧
- 一起动手编写Android图片加载框架
- C++实现读取图片长度和宽度