手摸手-100行代码实现一个功能完善的图片懒加载

手摸手-100行代码实现一个功能完善的图片懒加载

本文相对比较初级，为了节约时间，请小神及其以上级别的同学直接忽略。

有同学可能会问：那么多第三方库，为什么要自己动手写呢。景科同学的想法很简单，因为本人目前还是一个前端小白，只有通过不断的写，不断的学，在与bug的相爱相杀中才能更快速的进步。在证明可行可用之后不仅可以减少项目的第三方依赖，即便出现bug，解决自己代码的bug也要比解决别人代码的bug要好过一些。话不多说，且入正题。

一. 基础结构

手摸手第一步。在第一步，先把基础结构构思搭建一下，以方便后续撸码。图片懒加载本身就不是什么复杂的实现，所以基本结构也比较简单，无非就是初始化一下参数，容一下错，绑定几个函数，实现一下功能而已。具体代码且往下看：

(function (global, factory) {
    if (typeof exports === 'object' && typeof module !== 'undefined') {
        module.exports = factory(global)
    } else if (typeof define === 'function' && define.amd) {
        define(factory)
    } else {
        global.Lazy = factory(global)
    }
})(this, function () {
    // 全局变量，所有方法在此对象上扩展
    var Lazy = {};
    // 计时器
    var timer = null;
    // 节流延迟时间
    var delay = 150;
    // 是否开启节流
    var debounce = true;
    // 是否开启图片懒加载图片的重载。解释一下：就是图片离开懒加载区域要把图片状态复原，再次进入懒加载区域要在视觉上呈现懒加载效果
    // 先呵呵一下这个功能，正常的我肯定想不到这么个抽风的需求，谁让我曾经碰到过一个抽风的产品经理呢，实现不难，这里也顺便实现一下
    var unload = false;
    // 回掉函数
    var callback = function () {};
    // 元素相对于视窗的位置集合
    var boxRect = {};
    /**
    * 判断目标元素是否可见 #1
    * @param {HTMLElement} element
    * @returns {boolean}
    */
    var isHidden = function (element) {};
    /**
     * 判断目标元素是否进入懒加载区域 #2
     * @param {HTMLElement} element
     * @returns {boolean}
     */
    var canLoadImg = function (element) {};
    /**
     * 节流函数 #3
     */
    var onDebounceRender = function () {};
    /**
     * 始化方法，外部直接调用，配置参数在此接收 #4
     * @param {Object} options
     * @param {String} options.root - 图片滚动区域根元素选择器
     * @param {Number} options.offset - 懒加载阈值，当没有【上下左右】4个值时将以此为准
     * @param {Number} options.offsetTop - 懒加载阈值【上】
     * @param {Number} options.offsetRight - 懒加载阈值【右】
     * @param {Number} options.offsetBottom - 懒加载阈值【下】
     * @param {Number} options.offsetLeft - 懒加载阈值【左】
     * @param {Boolean} options.debounce - 是否开启函数节流
     * @param {Number} options.delay - 函数节流时间阈值
     * @param {Boolean} options.unload - 图片重载
     * @param {Function} options.callback - 懒加载操作完成时的回掉函数
     */
    Lazy.init = function(options) {};
    /**
     * 懒加载实现 #5
     * @param {HTMLElement} element
     */
    Lazy.render = function(element) {};
    /**
     * 不满足懒加载条件时销毁 #6
     */
    Lazy.destroy = function() {};
    // 返回
    return Lazy;
});

由于项目本身并不复杂，所以基础的结构也比较简单，剩下的几步我们只需要手摸手去做填空题(#1、#2、#3、#4、#5、#6)就好了。so easy，let`s go！

二. 功能函数实现

手摸手第二步。在第二步我们先把#1、#2、#3三个功能函数实现一下。

首先是#1函数isHidden的实现。

/**
 * 判断目标元素是否可见
 * https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetParent
 * @param {HTMLElement} element
 * @returns {boolean}
 */
var isHidden = function (element) {
    return element.offsetParent === null;
};

接下来是#2函数canLoadImg的实现。这儿用到了Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。关于Element.getBoundingClientRect()的信息请点击传送阵了解更多。

/**
 * 判断目标元素是否进入懒加载区域
 * 此函数依赖isHidden函数和boxRect全局变量
 * @param {HTMLElement} element
 * @returns {boolean}
 */
var canLoadImg = function (element) {
    if (isHidden(element)) return false;
    var eleRect = element.getBoundingClientRect();
    return (eleRect.top <= boxRect.b && eleRect.right >= boxRect.l && eleRect.bottom >= boxRect.t && eleRect.left <= boxRect.r);
};

最后是#3函数onDebounceRender的实现。由于这里对节流函数没什么特殊需求，所以实现的比较简单，如果看官同学需要完整的debounce函数，请点击lodash/debounce.js了解更多。

/**
 * 节流函数
 * 此函数依赖Lazy.render、debounce、timer、delay
 */
var onDebounceRender = function () {
    if (!debounce) {
        Lazy.render();
    } else {
        clearTimeout(timer);
        timer = setTimeout(function () {
            Lazy.render();
            timer = null;
        }, delay);
    }
};

三. 初始化函数

手摸手第三步。我们来实现一下Lazy.init初始化函数。这个函数的作用就是接收参数、绑定事件处理函数，所以更简单。

/**
 * 始化方法，外部直接调用，配置参数在此接收
 * @param {Object} options
 * @param {String} options.root - 图片滚动区域根元素选择器
 * @param {Number} options.offset - 懒加载阈值，当没有上下左右有4个值时将以此为准
 * @param {Number} options.offsetTop - 懒加载阈值【上】
 * @param {Number} options.offsetRight - 懒加载阈值【右】
 * @param {Number} options.offsetBottom - 懒加载阈值【下】
 * @param {Number} options.offsetLeft - 懒加载阈值【左】
 * @param {Boolean} options.debounce - 是否开启函数节流
 * @param {Number} options.delay - 函数节流时间阈值
 * @param {Boolean} options.unload - 图片重载
 * @param {Function} options.callback - 懒加载操作完成时的回掉函数
 */
Lazy.init = function (options) {
    options = options || {};
    global = document.querySelector(options.root) || global;
    debounce = options.debounce !== false;
    delay = options.delay || delay;
    unload = options.unload || unload;
    callback = options.callback || callback;
    // 懒加载区域，写的虽然有点长但是不难理解
    boxRect = {
        t: 0 - (options.offsetTop || options.offset || 0),
        r: (global.innerWidth || document.documentElement.clientWidth) + (options.offsetRight || options.offset || 0),
        b: (global.innerHeight || document.documentElement.clientHeight) + (options.offsetBottom || options.offset || 0),
        l: 0 - (options.offsetLeft || options.offset || 0)
    };
    // 这里提前调用一次，因为如果debounce为true，load之后会有最低250ms的延迟
    Lazy.render();
    // 绑定事件
    if (global.addEventListener) {
        global.addEventListener('load', onDebounceRender, false);
        global.addEventListener('scroll', onDebounceRender, false);
    } else {
        global.attachEvent('onload', onDebounceRender);
        global.attachEvent('onscroll', onDebounceRender);
    }
};

四. 核心方法实现

手摸手第四步。在第四步我们来完成Lazy.render函数的实现。这个函数也是本项目的核心方法，所有的懒加载实现都是在此处完成。思路不复杂，所以实现起来也比较简单。

/**
 * 懒加载实现
 * @param {HTMLElement} element
 */
Lazy.render = function (element) {
    // dom结构约定：img标签要有[data-lazy]自定义属性，需要设置背景的标签需要有[data-lazy-background]自定义属性
    var nodes = (element || document).querySelectorAll('[data-lazy], [data-lazy-background]');
    var len = nodes.length;
    for (var i = 0; i < len; i++) {
        var node = nodes[i];
        // 目标元素在懒加载区域和不在懒加载区域
        if (canLoadImg(node)) {
            // 懒加载图片需要重载，懒加载之前先将占位图片存储
            if (unload && node.src && !node.getAttribute('data-lazy-placeholder')) {
                node.setAttribute('data-lazy-placeholder', node.src);
            }
            // 图片的懒加载
            var src = node.getAttribute('data-lazy');
            if (src !== null && node.src !== src) {
                node.src = src;
            }
            // 背景的懒加载
            var bgUrl = node.getAttribute('data-lazy-background');
            if (bgUrl !== null && node.style.backgroundImage !== bgUrl) {
                node.style.backgroundImage = 'url(' + bgUrl + ')';
            }
            // 如果图片不需要重载，懒加载完成移除[data-lazy]自定义属性
            if (!unload) {
                node.removeAttribute('data-lazy');
            }
            // 懒加载完成移除[data-lazy-background]自定义属性
            node.removeAttribute('data-lazy-background');
            // 懒加载完成触发回掉
            callback(node, 'load');
        } else {
            // 当图片不在懒加载区域时做重载处理
            var placeholder = node.getAttribute('data-lazy-placeholder');
            if (unload && placeholder !== null) {
                node.src = placeholder;
                // 移除[data-lazy-placeholder]自定义属性
                node.removeAttribute('data-lazy-placeholder');
                // 重载完成触发回掉
                callback(node, 'unload');
            }
        }
    }
    // 如果没有懒加载的元素，销毁Lazy.init添加的事件
    if (len === 0) {
        Lazy.destroy();
    }
};

五. 解绑方法实现

手摸手第五步。这一步更简单，话不多说直接看代码。

/**
 * 不满足懒加载条件时移除绑定的事件，重置定时器引用
 */
Lazy.destroy = function () {
    if (document.removeEventListener) {
        global.removeEventListener('scroll', onDebounceRender);
    } else {
        global.detachEvent('onscroll', onDebounceRender);
    }
    clearTimeout(timer);
};

六. 结语

由于景科同学刚开始写博文，语文老师走的又早(是真的早)😂，文笔难免抠脚，不足之处还望各位看官同学多多包含。本项目是景科同学自写自测，虽然比较简单，但是不保证没有隐藏的bug。所以如果看官同学发现还望留言指正，景科同学在此以示感谢。

本文完整代码请点这里。

如果大神同学看到此处，更希望你能留下批评指正的意见，这样景科同学才能更快的进步，下次如果你们不小心点开景科同学写的文章才不会白花花的浪费宝贵的时间，谁说不是呢😄！