您的位置：首页 > Web前端 > JavaScript

Javascript实现图片懒加载插件的方法

2016-10-20 10:47 736 查看

前言

网络上各大论坛，尤其是一些图片类型的网站上，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，从而节约了网络带宽和提高了初次加载的速度，具体实现的技术并不复杂，下面分别对其说明。

Web 图片的懒加载就是通过读取img元素，然后获得img元素的

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-lazyloadfunction _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]);
}
};
})();

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者使用图片懒加载的时候能有所帮助，如果有有疑问大家可以留言交流。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  js 懒加载 插件
相关文章推荐
新的分享
章节导航