js 写插件入门（图片懒加载）
阅读 (241) 2020-07-21 11:13:26
原生JS写插件，本例重点在于window滚动位置的判断
图片懒加载的插件有很多，其原理基本就是将图片链接先隐藏于data属性中，等滚动到特点位置后再将图片链接替换到 img src中
在不添加任何优化和修饰的情况下，核心代码逻辑非常简单，只做两件事即可
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<meta name="referrer" content="no-referrer">
<title>图片懒加载demo | PHPer | Web前端 | 编程爱好者 | 郑凯文的个人网站</title>
<style>
img {
max-width: 100%;
}
</style>
</head>
<body style="padding: 20px;margin: 0;">
<div style="width: 640px;word-wrap: break-word;margin: 0 auto;">
<p><img src="img/loading-yellow.gif" data-original="https://pic4.zhimg.com/v2-098ae36dfa6d61ae3918092eefa699d1_r.jpg?source=1940ef5c"/></p>
<p><img src="img/loading-yellow.gif" data-original="https://pic4.zhimg.com/v2-098ae36dfa6d61ae3918092eefa699d1_r.jpg?source=1940ef5c"/></p>
<p><img src="img/loading-yellow.gif" data-original="https://pic4.zhimg.com/v2-098ae36dfa6d61ae3918092eefa699d1_r.jpg?source=1940ef5c"/></p>
<p><img src="img/loading-yellow.gif" data-original="https://pic4.zhimg.com/v2-098ae36dfa6d61ae3918092eefa699d1_r.jpg?source=1940ef5c"/></p>
<p><img src="img/loading-yellow.gif" data-original="https://pic4.zhimg.com/v2-098ae36dfa6d61ae3918092eefa699d1_r.jpg?source=1940ef5c"/></p>
<p><img src="img/loading-yellow.gif" data-original="https://pic4.zhimg.com/v2-098ae36dfa6d61ae3918092eefa699d1_r.jpg?source=1940ef5c"/></p>
<p><img src="img/loading-yellow.gif" data-original="https://pic4.zhimg.com/v2-098ae36dfa6d61ae3918092eefa699d1_r.jpg?source=1940ef5c"/></p>
<p><img src="img/loading-yellow.gif" data-original="https://pic4.zhimg.com/v2-098ae36dfa6d61ae3918092eefa699d1_r.jpg?source=1940ef5c"/></p>
<p><img src="img/loading-yellow.gif" data-original="https://pic4.zhimg.com/v2-098ae36dfa6d61ae3918092eefa699d1_r.jpg?source=1940ef5c"/></p>
<p><img src="img/loading-yellow.gif" data-original="https://pic4.zhimg.com/v2-098ae36dfa6d61ae3918092eefa699d1_r.jpg?source=1940ef5c"/></p>
<p><img src="img/loading-yellow.gif" data-original="https://pic4.zhimg.com/v2-098ae36dfa6d61ae3918092eefa699d1_r.jpg?source=1940ef5c"/></p>
</div>
</body>
</html>
其实核心JS：
就这些就可以实现图片懒加载了
/*
* 监听函数
* obj 监听对象
* type 监听事件
* handle 执行函数
*/
function addEvent(obj,type,handle){
try{
obj.addEventListener(type,handle,false);
}catch(e){
try{
obj.attachEvent('on'+type,handle);
}
catch(e){
obj['on' + type]=handle;//早期浏览器
}
}
}
var render = function() {
// 所有需要懒加载的元素
var nodes = document.querySelectorAll('[data-original]');
// 打印所有图片，可以看到各元素对象有一些属性，可以自己调试看一下
console.log(nodes)
// 获取滚动距离
var scrollHeight = window.pageYOffset + document.documentElement.clientHeight
// 遍历需要懒加载的元素
for (var key in nodes) {
if (nodes.hasOwnProperty(key)) {
var item = nodes[key]
// 滚动到图片位置时，替换src
// 这里的item.offsetTop就是图片元素距离顶部的距离
if(scrollHeight >= item.offsetTop) {
// 从data属性中获取original图片链接
item.setAttribute('src', item.dataset.original)
}
}
}
}
// 监听两个事件，第一，当页面滚动到某个图片元素位置时，加载图片
addEvent(document ,'scroll', render)
// 当页面及资源完全加载后
addEvent(window ,'load', render)
到这里就可以完成“图片懒加载”的功能了。
那在实际使用情况下，每次滚动都会遍历并执行懒加载的操作，显然这样是很不合理的，下面进行一些优化
待优化的点：
1.已经加载好的图片，不再重新再被document.querySelectorAll('[data-original]')查询到，也就是后面不再重新设置src
我的一开始的思路是，直接把 data-original 删除即可，用removeAttribute，即：item.removeAttribute('data-original')
2.第一步做完发现，由于监听了滚动事件，每次滚动，函数可能被执行n多次，可以再优化一下，加入函数节流
3.如果待加载的图片地址404了，即“图裂了”，我想优化一下，换成一张好看点的404占位图
优化思路是：判断图片链接响应状态，如果不是200，则填充本地404图片地址
4.现在的代码是在刚滚动到图片位置时，就把src改了，比如我们作为开发人员，我可以通过控制台调试，查看实际代码是否工作，但是作为老板，他刚进来看到就是已经替换好的图片，老板都没都根本看不清是不是懒加载，他估计会想：“这程序员到底有没有做这个功能”，遇到这种情况怎么办呢？我们需要在滚动到图片位置的条件上加点偏移量，即需要让老板看到滚动到图片时，图片还是Loading的情况，让他看清情况后，我再把图片地址改成真实图片，甚至可以加点延时和渐显的效果。
5.将某些设置做成可配置项
一步步来，我先完善下代码，把代码插件化，然后把优化点1完成：
优化功能点1
;(function(undefined) {
"use strict"
var _global
// 合并对象（深拷贝）
function extend(defaults, n) {
var n = n || {};
for (var x in defaults) {
// 对于使用时，没有设置的参数；用默认参数代替
if (typeof n[x] === 'undefined') {
n[x] = defaults[x];
}
}
return n
}
/*
* 监听函数
* obj 监听对象
* type 监听事件
* handle 执行函数
*/
function addEvent(obj,type,handle){
try{
obj.addEventListener(type,handle,false);
}catch(e){
try{
obj.attachEvent('on'+type,handle);
}
catch(e){
obj['on' + type]=handle;//早期浏览器
}
}
}
// 插件函数
function Klayz(opt){
// 未使用new关键词时
if (!(this instanceof Klayz)){
// 等于再new一个
return new Klayz(opt)
}
this._init(opt)
}
Klayz.prototype = {
constructor: this,
_init: function (opt) {
// 监听两个事件，第一，当页面滚动到某个图片元素位置时，加载图片
addEvent(document ,'scroll', this._render.bind(this))
// 当页面及资源完全加载后
addEvent(window ,'load', this._render.bind(this))
},
_render: function () {
var nodes = document.querySelectorAll('[data-original]')
console.log(nodes)
var scrollHeight = window.pageYOffset + document.documentElement.clientHeight
console.log(scrollHeight)
for (var key in nodes) {
if (nodes.hasOwnProperty(key)) {
var item = nodes[key]
if(scrollHeight >= item.offsetTop) {
// 设置真实图片链接
item.setAttribute('src', item.dataset.original)
// 移除data-original后，下次不再遍历该原素
item.removeAttribute('data-original')
}
}
}
}
}
// 最后将插件对象暴露给全局对象
_global = (function(){ return this || (0, eval)('this'); }());
if (typeof module !== "undefined" && module.exports) {
module.exports = Klayz;
} else if (typeof define === "function" && define.amd) {
define(function(){return Klayz;});
} else {
!('Klayz' in _global) && (_global.Klayz = Klayz);
}
}());
优化功能点2
/** 节流
* 应用场景:用户进行高频事件触发(滚动)，但在限制在n秒内只会执行一次。
* 实现原理: 每次触发时间的时候，判断当前是否存在等待执行的延时函数
* @params fun 传入的防抖函数(callback) delay 等待时间
* */
function throttle(fun, delay){
delay = delay || 1000
let flag = true
var f = fun
return function (...args) {
if (!flag) return;
flag = false
setTimeout(function () {
f.apply(this, args)
flag = true
}, delay)
}
}
优化功能点3
// 验证图片是否404状态
function validateImage(url)
{
var xmlHttp
if (window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
xmlHttp.open('Get', url, false);
xmlHttp.send();
if(xmlHttp.status==404){
return false;
}else{
return true;
}
}
优化功能点4
主要是淡入的效果
// 设置元素透明度,透明度值按IE规则计,即0~100
function SetOpacity(el, v){
el.filters ? el.style.filter = 'alpha(opacity=' + v + ')' : el.style.opacity = v / 100;
}
/*
* 淡入效果(含淡入到指定透明度)
* el 需要淡入的元素
* speed 淡入速度,正整数(可选)
* opacity 淡入到指定的透明度,0~100(可选)
*/
function fadeIn(el, speed, opacity){
speed = speed || 20;
opacity = opacity || 100;
//显示元素,并将元素值为0透明度(不可见)
el.style.display = 'block';
SetOpacity(el, 0);
//初始化透明度变化值为0
var val = 0;
//循环将透明值以5递增,即淡入效果
var timer = setInterval(function() {
if (val <= opacity) {
SetOpacity(el, val)
val += 5
} else {
clearInterval(timer)
}
}, speed);
}
优化功能点5（最终版）
也就是最终的完成版，至少是v1可进行测试的版本了
;(function(undefined) {
"use strict"
var _global
// 合并对象（深拷贝）
function extend(defaults, n) {
var n = n || {};
for (var x in defaults) {
// 对于使用时，没有设置的参数；用默认参数代替
if (typeof n[x] === 'undefined') {
n[x] = defaults[x];
}
}
return n
}
/*
* 监听函数
* obj 监听对象
* type 监听事件
* handle 执行函数
*/
function addEvent(obj,type,handle){
try{
obj.addEventListener(type,handle,false);
}catch(e){
try{
obj.attachEvent('on'+type,handle);
}
catch(e){
obj['on' + type]=handle;//早期浏览器
}
}
}
// 验证图片是否404状态
function validateImage(url)
{
var xmlHttp
if (window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
xmlHttp.open('Get', url, false);
xmlHttp.send();
if(xmlHttp.status==404){
return false;
}else{
return true;
}
}
// 设置元素透明度,透明度值按IE规则计,即0~100
function SetOpacity(el, v){
el.filters ? el.style.filter = 'alpha(opacity=' + v + ')' : el.style.opacity = v / 100;
}
/*
* 淡入效果(含淡入到指定透明度)
* el 需要淡入的元素
* speed 淡入速度,正整数(可选)
* opacity 淡入到指定的透明度,0~100(可选)
*/
function fadeIn(el, speed, opacity){
speed = speed || 20;
opacity = opacity || 100;
//显示元素,并将元素值为0透明度(不可见)
el.style.display = 'block';
SetOpacity(el, 0);
//初始化透明度变化值为0
var val = 0;
//循环将透明值以5递增,即淡入效果
var timer = setInterval(function() {
if (val <= opacity) {
SetOpacity(el, val)
val += 5
} else {
clearInterval(timer)
}
}, speed);
}
/** 节流
* 应用场景:用户进行高频事件触发(滚动)，但在限制在n秒内只会执行一次。
* 实现原理: 每次触发时间的时候，判断当前是否存在等待执行的延时函数
* @params fun 传入的防抖函数(callback) delay 等待时间
* */
function throttle(fn, delay){
delay = delay || 1000
var flag = true
var f = fn
return function () {
if (!flag) return;
flag = false
setTimeout(function () {
f.apply(this)
flag = true
}, delay)
}
}
// 插件函数
function Klayz(opt){
// 未使用new关键词时
if (!(this instanceof Klayz)){
// 等于再new一个
return new Klayz(opt)
}
this._init(opt)
}
Klayz.prototype = {
constructor: this,
_init: function (opt) {
var defaults = {
defaultImg: 'data:image/gif;base64,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', // 默认的占位图
errorImg: 'data:image/png;base64,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', // 图裂的占位图
offset: 0, // 向上的偏移量，单位px
}
// 没有设置的参数，使用默认值
this.opt = extend(defaults, opt) // 得到的this.opt, 在方法中调用；
// 监听两个事件，第一，当页面滚动到某个图片元素位置时，加载图片
addEvent(document ,'scroll', throttle(this._render.bind(this)))
// 当页面及资源完全加载后
addEvent(window ,'load', throttle(this._render.bind(this)))
},
_render: function () {
var nodes = document.querySelectorAll('[data-original]')
console.log(nodes)
var scrollHeight = window.pageYOffset + document.documentElement.clientHeight
console.log(scrollHeight)
for (var key in nodes) {
if (nodes.hasOwnProperty(key)) {
var item = nodes[key]
// 如果src是空的，未设置的，则填充默认占位图
if(!item.getAttribute('src')) {
item.setAttribute('src', this.opt.defaultImg)
}
// 计算时加入偏移量
if((scrollHeight - this.opt.offset) >= item.offsetTop) {
// 设置真实图片链接
var imgUrl = item.dataset.original
// 图片响应状态
var imgStatus = validateImage(imgUrl)
if(imgStatus) {
// 正常情况
item.setAttribute('src', item.dataset.original)
} else {
// 404图片设置404占位
item.setAttribute('src', this.opt.errorImg)
}
// 移除data-original后，下次不再遍历该原素
item.removeAttribute('data-original')
// 图片淡入
fadeIn(item)
}
}
}
}
}
// 最后将插件对象暴露给全局对象
_global = (function(){ return this || (0, eval)('this'); }());
if (typeof module !== "undefined" && module.exports) {
module.exports = Klayz;
} else if (typeof define === "function" && define.amd) {
define(function(){return Klayz;});
} else {
!('Klayz' in _global) && (_global.Klayz = Klayz);
}
}());
上面代码看着很多，其中有很长一段图片的base64代码，因为不想额外引用固定的图片地址，所以就转成base64引用了，如果去掉base64的图片内容，代码就清晰很多了
调用插件：
Klayz({
defaultImg: './img/loading-yellow.gif',
errorImg: './img/404.png',
offset: 100
})
demo:http://returnc.com/demo/layz.html
又重复造了个轮子。。。
更新于：2020-07-22 14:17:11
