一、前言
前阵子一直在找前端优化的相关知识，之前就了解过懒加载但一直没时间去分析代码。现在各种懒加载的插件也比较多，比较受欢迎的就是Jquery的lazyload.js以及无依赖的echo.js两个都比较好用。如果项目没有依赖jq可以使用echo。
二、自己实现
在网上对比了各种懒加载方法之后，自己也写了一个。原理这里就不再赘述，网上很多。
直接上代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>懒加载实例</title> <style type="text/css"> /*一定要有预先高度*/ .container img{ margin-top: 100px; } </style> </head> <body> <div class="container"> <img class="samLazyImg" src="images/loading.gif" dataimg="images/1.jpg" alt="" /> </div> <div> <img class="samLazyImg" src="images/loading.gif" dataimg="images/2.jpg" alt="" /> </div> <div> <img class="samLazyImg" src="images/loading.gif" dataimg="images/3.jpg" alt="" /> </div> <div> <img class="samLazyImg" src="images/loading.gif" dataimg="images/4.jpg" alt /> </div> <div> <img class="samLazyImg" src="images/loading.gif" dataimg="images/5.jpg" alt="" /> </div> <div> <img class="samLazyImg" src="images/loading.gif" dataimg="images/1.jpg" alt="" /> </div> <div> <img class="samLazyImg" src="images/loading.gif" dataimg="images/2.jpg" alt="" /> </div> <div> <img class="samLazyImg" src="images/loading.gif" dataimg="images/3.jpg" alt="" /> </div> </body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script type="text/javascript"> //创建一个懒加载对象 var imgObj = { //初始化方法合并默认参数与传入参数。 init:function(para){ //默认参数 var defaultPara={ //动画暂未使用 anim : false, selectName : ".samLazyImg", extendHeight: 0, realImg : "dataimg" } var para = para var options = $.extend(defaultPara,para,{}) imgObj.initImg(options) }, //图片初始化，监听滚动事件。遍历所有挂载类，通过调用isView和是否在图片dom中加入了懒加载挂载类".samLazyImg"判断是否要执行load //同时触发滚动。 initImg:function(para){ var selectName = para.selectName, realImg = para.realImg, anim = para.anim, extendHeight = para.extendHeight; $(window).on("scroll",function(){ $(selectName).each(function(key,val){ var $this = $(this); var isIn = imgObj.isInView($this,extendHeight) var isLazy = $this.attr(realImg) if(!isLazy || !isIn) return; imgObj.load($this,realImg) }) }).trigger('scroll'); }, //判断是否在可视范围内 isInView:function(el,extendHeight){ //文档相对于顶部的偏移量 var top = window.pageYOffset, bottom = window.innerHeight + top, elTop = $(el).offset().top; return top <= elTop && elTop-extendHeight <= bottom }, //加载真实图片函数,如果已经加载过了则不重新发送请求 load:function($this,realImg){ if($this.attr('lazyImgLoaded')){ return false } //var img = new Image() var url = $this.attr(realImg) //img.onload = function(){ $this.attr("src",url) //} //realImg && (img.src = url) $this.attr('lazyImgLoaded', true); } } para = { anim:true, extendHeight:0 } imgObj.init(para) </script> </html>
三、扩张为JQ插件方法
(function($){ $.scrollLoading = function(options){ //默认参数 var defaultPara = { attr:"url", container:".Img", anim:false, extendHeight:0, }; //合并传入参数 var para = $.extend(defaultPara,options,{}), container = para.container, realAttr = para.attr, extendHeight = para.extendHeight; //监听滚动 $(window).on("scroll",function(){ $(container).each(function(key,val){ var $this = $(this); var isIn = isInView($this,extendHeight) var isLazy = $this.attr(realAttr) if(!isLazy || !isIn) return; Load($this,realAttr) }) }).trigger('scroll'); //判断函数,第一个参数为遍历的img节点，第二个参数为自定义的弹性高度 function isInView(el,extendHeight){ //文档相对于顶部的偏移量 var top = window.pageYOffset, bottom = window.innerHeight + top, elTop = $(el).offset().top; return top <= elTop && elTop-extendHeight <= bottom } //加载函数,第一个参数为遍历的img节点，第二个参数为该图片节点的真实url function Load($this,url){ if($this.attr('lazyImgLoaded')){ return false } //var img = new Image() var url = $this.attr("data-url") //img.onload = function(){ $this.attr("src",url) //} //realImg && (img.src = url) $this.attr('lazyImgLoaded', true); } } })(jQuery); $.scrollLoading({ attr:"data-url", container:".Img", anim:false, extendHeight:0, })