首页 > 代码库 > 图片懒加载
图片懒加载
在图片比较多的网站总会看见,当浏览到那个位置,就加载那的图片。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } img{ display: block; width: 500px; height: 300px; } div{ margin: 500px 0 0 40px; } </style> </head> <body> <div id="banner"> <img data-src="http://www.mamicode.com/image/01.jpeg"> <img data-src="http://www.mamicode.com/image/02.jpeg"> <img data-src="http://www.mamicode.com/image/03.jpeg"> <img data-src="http://www.mamicode.com/image/04.jpeg"> <img data-src="http://www.mamicode.com/image/05.jpg"> <img data-src="http://www.mamicode.com/image/06.png"> <img data-src="http://www.mamicode.com/image/07.png"> <img data-src="http://www.mamicode.com/image/08.png"> </div> <script type="text/javascript"> window.onload=function(){ var banner=document.getElementById("banner"); var imgs=banner.getElementsByTagName("img"); add();//页面加载完成先执行一次 function getTop(obj){ //写一个方法获取图片距离top的值 var t=0; //定义一个保存top值的 变量 while(obj){ //循环获取每个父级定位的top值 t+=obj.offsetTop; //获取传入或改变父级定位的top值,当到大body的时候没有 他的父级定位为null所以就停了 obj=obj.offsetParent; //获取obj的父级定位 console.log(t) console.log(obj) } return t; } function add(){ var S = document.documentElement.scrollTop || document.body.scrollTop; //获取滑动条距top的值 var H = window.innerHeight; //获取显示区域高度(只读) for(var i=0;i<imgs.length;i++){ //循环图片 if((S+H) > getTop(imgs[i])){ 判断图片是否进入可视区域 imgs[i].setAttribute("src",imgs[i].getAttribute("data-src")); //当进入的时候给src 赋值 } } } window.onscroll=function(){ //每次滚动运行方法判断 add() } } </script> </body> </html>
图片懒加载
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。