一、懒加载即懒的不想加载无用的东西,只加载界面可视区域的内容;
二、代码部分:
<!doctype html> <html> <head> <meta charset="UTF-8" /> <title>懒加载实例----步浪博客</title> <style type="text/css"> img{ width: 600px; height: 260px; } </style> </head> <body> <div> <img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" /> </div> <div> <img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" /> </div> <div> <img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" /> </div> <div> <img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" /> </div> <div> <img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" /> </div> <div> <img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" /> </div> <div> <img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" /> </div> <div> <img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" /> </div> <div> <img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" /> </div> <div> <img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" /> </div> <div> <img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" /> </div> <div> <img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" /> </div> <div> <img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" /> </div> </body> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="js/bl.lazyload.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> lazyload.init({ anim:true,//开启动画 selectorName:".samLazyImg",//懒加载盒子 animtime:200//动画时间 }); </script> </html>
三、bl.lazyload.js部分:
/* * selectorName,要懒加载的选择器名称 * extend_height 扩展高度 * anim 是否开启动画 * realSrcAtr 图片真正地址 * anim 动画时间*/ var lazyload = { init : function(opt){ var that = this, op = { anim: true, extend_height:0, selectorName:"img", realSrcAtr:"dataimg", animtime:300 }; $.extend(op,opt); that.img.init(op); }, img : { init : function(n){ var that = this, selectorName = n.selectorName, realSrcAtr = n.realSrcAtr, anim = n.anim, animtime = n.animtime; // 判断要加载的图片是不是在指定窗口内 function inViewport( el ) { // 当前窗口的顶部 var top = window.pageYOffset, // 当前窗口的底部 btm = window.pageYOffset + window.innerHeight, // 元素所在整体页面内的y轴位置 elTop = $(el).offset().top; // 判断元素,是否在当前窗口,或者当前窗口延伸400像素内 return elTop >= top && elTop - n.extend_height <= btm; } // 滚动事件里判断,加载图片 $(window).on('scroll', function() { $(selectorName).each(function(index,node) { var $this = $(this); if(!$this.attr(realSrcAtr) || !inViewport(this)){ return; } act($this); }) }).trigger('scroll'); // 展示图片 function act(_self){ // 已经加载过了,则中断后续代码 if (_self.attr('lazyImgLoaded')) return; var img = new Image(), original = _self.attr('dataimg'); // 图片请求完成后的事件,把dataimg指定的图片,放到src里面,浏览器显示 img.onload = function() { _self.attr('src', original); anim && _self.css({ opacity: .2 }).animate({ opacity: 1 }, animtime); }; // 当你设置img.src的时候,浏览器就在发送图片请求了 original && (img.src = original); _self.attr('lazyImgLoaded', true); } } } };
四、完整项目获取方法:
1、关注微信公众号“策码扬编”;
2、发送关键字“懒加载”;