js学习之原生js实现懒加载
2017-11-28 16:05
309 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> img{ width: 500px; height: 500px; display: block; } </style> </head> <body> <div class = "box"> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> </div> </body> <script type="text/javascript"> (function(){ function tagName(tagName){ return document.getElementsByTagName(tagName); }function addEvent(obj,type,func){ if(obj.addEventListener){ obj.addEventListener(type,func,false); }else if(obj.attachEvent){ obj.attachEvent('on'+type,func); } } var v = { eleGroup:null, eleTop:null, eleHeight:null, screenHeight:null, limitHeight:null } function init(element){ v.eleGroup = document.getElementsByTagName(element); v.screenHeight = document.documentElement.clientHeight; var len = v.eleGroup.length; for(var i = 0;i < len; i++){ if(v.eleGroup[i].offsetTop<v.screenHeight&&v.eleGroup[i].getAttribute("asrc")){ v.eleGroup[i].setAttribute("src",v.eleGroup[i].getAttribute("asrc")); v.eleGroup[i].removeAttribute("asrc"); } } } function lazyload(){ v.limitHeight =document.documentElement.scrollTop || document.body.scrollTop+ document.documentElement.clientHeight; var len = v.eleGroup.length; for(var j = 0 ;j < len; j++){ if(v.eleGroup[j].offsetTop <= v.limitHeight&&v.eleGroup[j].getAttribute("asrc")){ v.eleGroup[j].setAttribute("src",v.eleGroup[j].getAttribute("asrc")); v.eleGroup[j].removeAttribute("asrc"); } } } init("img"); addEvent(window,"scroll",lazyload); })() </script> </html>
我们知道了浏览器加载img是很耗费资源的,还有带宽,而且还有一个特点就是如果没有设置img的src属性,就不会消耗这些资源,所以我们用到的加载的方法就是首先将所有img的src置空,然后自定义一个asrc属性,这里放的是实际的src,当我们需要加载这张图片时就可以获取img的这个属性,并将其值赋值给src,实现图片的加载。
思路:首先在当前可视化的区域加载图片,首先需要获取浏览器的高度,然后查询每个元素相对浏览器顶部距离,然后加载满足:相对浏览器顶部的距离小于浏览器高度的图片,实现对可视化区域的初始化填充。
真正实现懒加载的原理是:获取当前元素距离浏览器顶部的高度,与浏览器+scroll卷到上面的高度相比较,如果前者小于后者就代表轮到这张图片显示了!就把它加载出来。
ps:需要注意的地方
addEventListener VS attachEvent
前者兼容主流浏览器,后者兼容ie(ie6及更高级版本兼容,低于ie6未测试)
document.documentElement VS document.body
ie默认的box-sizing为border-box不会将html识别为盒模型,所以用document.documentElement就获取不到clientHeight scrollHeight等值。所以使用
document.documentElement.scrollTop || document.body.scrollTop
可以解决兼容性问题
相关文章推荐
- 原生JS实现首页进度加载动画
- 原生JS实现瀑布流及加载效果
- 原生js实现ajax异步加载
- js开发:原生js实现图片延迟加载
- 原生JS实现AJAX、JSONP及DOM加载完成事件,并提供对应方法
- JS-学习笔记:原生JS实现轮播图
- 使用jQuery或者原生js实现鼠标滚动加载页面新数据
- android和JS交互,相互调用方法传值。不使用第三方实现原生加载word、ppt、pdf文档
- 原生JS实现下拉加载
- JAVA学习笔记_JS实现刷新_重新加载页面
- 原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
- 原生Js页面滚动延迟加载图片实现原理及过程
- 原生 JS 懒加载简单实现
- 原生JS实现图片懒加载
- 关于面试中的原生js实现事件代理和事件模型和事件广播的学习
- 原生JS实现图片懒加载
- [学习笔记]zTree是一个很好的js插件实现加载树形结构
- 原生JS实现AJAX、JSONP及DOM加载完成事件
- 原生JS实现AJAX、JSONP及DOM加载完成事件
- 原生JS实现图片懒加载