【JavaScript】图片懒加载

来源：互联网发布：wpf 漂亮界面源码编辑：程序博客网时间：2024/05/16 12:28

图片懒加载指的是不直接给src赋值，当图片需要显示的时候才被赋值

（比如当页面滚动时只加载当前能看到的图片，看不到的部分未加载，当页面向上滚动时，下面的图片才加载出来）

这种方式不会影响图片的显示,同时最大程度上减少服务器端的资源耗用，使网页更加流畅。

一般大型网站，图片比较多，会使用图片懒加载。

步骤：
1.给图片自定义一个属性，保存真正图片地址，src先给一张占位图（占位图一般只有一张）
2.当滚动页面，图片到达可视区，再给src赋真正地址，并且删除自定义属性

如下图：网页页面不断向上滚动，当图片A到达图片B的位置时，马上要进入到用户可视区，此时将图片的真正地址赋给src,变为真正要显示的图片，此时，sTop+cHeight=offsetT,（offsetT是图片距离页面顶部的距离）由于滚动时，sTop+cHeight或许不会刚好等于offsetT，所以当sTop+cHeight>=offsetT时，修改src

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css"> #box{width:500px; margin:auto;}#box li{height:300px;border:5px solid red;margin-bottom:250px; }#box li img{width:100%;height:100%;}</style></head><body> <div id="box"><ul><li><img src="http://g.alicdn.com/s.gif" alt="" lazy-src="img/2.jpg"/></li><li><img src="http://g.alicdn.com/s.gif" alt="" lazy-src="img/3.jpg"/></li><li><img src="http://g.alicdn.com/s.gif" alt="" lazy-src="img/4.jpg"/></li><li><img src="http://g.alicdn.com/s.gif" alt="" lazy-src="img/5.jpg"/></li><li><img src="http://g.alicdn.com/s.gif" alt="" lazy-src="img/6.jpg"/></li><li><img src="http://g.alicdn.com/s.gif" alt="" lazy-src="img/7.jpg"/></li></ul></div> <script>  //滚上去的距离+页面可视区的高度>=图片距离页面顶部的距离//获取DOM对象--所有li元素的集合var lists=document.querySelectorAll("#box li");window.onscroll=function(){//监听页面滚动，页面滚动则触发此方法//滚出去的距离var sTop=getScrollTop();//页面可视区的高度var cHeight=getClientHeight()for(var i=0;i<lists.length;i++){//图片距离页面顶部的距离var offsetT=getOffsetTop(lists[i]);//获取到lazy-src的属性值，即图片的真正地址var imgObj=lists[i].children[0];var la_src=imgObj.getAttribute("lazy-src");//标签内自定义属性只能通过get/setAttribute() //进入可视区，并且src没有被修改过（修改过的lazy-src已经被删除了，保存的是null）if(sTop+cHeight>=offsetT&&la_src){//修改src imgObj.src=la_src;//删除lazy-src属性imgObj.removeAttribute("lazy-src");}}}//滚出去的距离（兼容谷歌和火狐） function getScrollTop(){  return document.body.scrollTop||document.documentElement.scrollTop;  }    //获取可视区域高度  function getClientHeight(){  return window.innerHeight||document.documentElement.clientHeight;  }  //获取元素到顶部的距离  function getOffsetTop(ele){var top=0;//当ele是body的时候就可以跳出去了（因为body没有偏移父元素）while(ele.offsetParent!=null){top+=ele.offsetTop+ele.offsetParent.clientTop;ele=ele.offsetParent;}return top;}</script></body></html>

阅读全文

0 0