本文相对比较初级，为了节约时间，请小神及其以上级别的同学直接忽略。
有同学可能会问：那么多第三方库，为什么要自己动手写呢。景科同学的想法很简单，因为本人目前还是一个前端小白，只有通过不断的写，不断的学，在与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; });