| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <style> | |
| div{margin-top: 300px; width: 470px; height: 150px; border:1px solid #000;} | |
| </style> | |
| </head> | |
| <body> | |
| <div><img _src="img2/1.jpg" /></div> | |
| <div><img _src="img2/2.jpg" /></div> | |
| <div><img _src="img2/3.jpg" /></div> | |
| <div><img _src="img2/4.jpg" /></div> | |
| <div><img _src="img2/5.jpg" /></div> | |
| <script> | |
| window.onload = function(){ | |
| //懒加载（性能优化）：用于图片比较多的列表页面，一般用于购物网站会多些， | |
| //解决的问题：当图片过多时，页面打开的速度过慢 | |
| //1.定义变量 | |
| var aImg = document.getElementsByTagName('img'); | |
| //第一张图片默认是显示状态 | |
| aImg[0].setAttribute('src',aImg[0].getAttribute('_src')); | |
| //默认的加载状态 | |
| for(var i =0;i<aImg.length;i++){ | |
| aImg[i].aaa= true;//图片默认是未加载的状态 | |
| } | |
| //绑定滚动事件 | |
| window.onscroll = function(){ | |
| //循环图片 | |
| for(var i=0;i<aImg.length;i++){ | |
| // console.log('图片的下标：'+i); | |
| // console.log('图片和顶部的距离：'+aImg[i].offsetTop); | |
| // console.log('页面的可视区高度：'+viewH()); | |
| // console.log('滚动的距离：'+ getScrollY()); | |
| // console.log('-----------------------------------'); | |
| //判断图片什么时候加载 | |
| if(aImg[i].offsetTop <= viewH()+ getScrollY() && aImg[i].aaa){//图片加载过一次后，if语句中的内容就不再执行了 | |
| console.log('***'+i+'***'); | |
| var srcStr = aImg[i].getAttribute('_src'); | |
| //设置图片的src属性 | |
| aImg[i].setAttribute('src',srcStr); | |
| aImg[i].aaa = false; | |
| } | |
| } | |
| } | |
| //设置 滚动高度的兼容性写法， document.documentElement.scrollTop ie浏览器 document.body.scrollTop 火狐或chrome | |
| function setScrollY(num){ | |
| document.documentElement.scrollTop = document.body.scrollTop = num; | |
| } | |
| //获取滚动高度 | |
| function getScrollY(){ | |
| return window.pageYOffset || document.documentElement.scrollTop; | |
| } | |
| //获取页面高度 | |
| function viewH(){ | |
| return document.documentElement.clientHeight; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
懒加载的一个小原理
猜你喜欢
转载自blog.csdn.net/qq_39634880/article/details/80357808
今日推荐
周排行