我们在浏览淘宝京东等大型购物网页时会经常出现许多图片而图片需要花费我们非常多的流量问题。
我们在写网页的时候怎么解决这个问题呢？这时候就要用到我们图片懒加载的问题，这样不仅可以
解决流量问题，也提高了性能等等。
下面我们就来看一下图片的懒加载怎么问题。
<span style="font-size: 18px"><!DOCTYPE html></span><br/><span style="font-size: 18px"><html lang="en"></span><br/><span style="font-size: 18px"><head></span><br/><span style="font-size: 18px"> <meta charset="UTF-8"></span><br/><span style="font-size: 18px"> <title>Title</title></span><br/><span style="font-size: 18px"> <style></span><br/><span style="font-size: 18px"> *{</span><br/><span style="font-size: 18px"> margin: 0;</span><br/><span style="font-size: 18px"> padding: 0;</span><br/><span style="font-size: 18px"> list-style-type: none;</span><br/><span style="font-size: 18px"> }</span><br/><span style="font-size: 18px"> html,body{</span><br/><span style="font-size: 18px"> width: 100%;</span><br/><span style="font-size: 18px"> height: 100%;</span><br/><span style="font-size: 18px"> }</span><br/><span style="font-size: 18px"> #div div{</span><br/><span style="font-size: 18px"> width: 400px;</span><br/><span style="font-size: 18px"> height: 500px;</span><br/><span style="font-size: 18px"> /*border:1px solid #000;*/</span><br/><span style="font-size: 18px"> display: inline-block;</span><br/><span style="font-size: 18px"> margin:10px;</span><br/><span style="font-size: 18px"> }</span><br/><span style="font-size: 18px"> img{</span><br/><span style="font-size: 18px"> width: 100%;</span><br/><span style="font-size: 18px"> height: 100%;</span><br/><span style="font-size: 18px"> }</span><br/><span style="font-size: 18px"> </style></span><br/><span style="font-size: 18px"> <script></span><br/><span style="font-size: 18px"> // 获取距离父级距离</span><br/><span style="font-size: 18px"> function getPos(obj) {</span><br/><span style="font-size: 18px"> var t=0;//先声明两个变量 用来存储距离上面的高度 距离左边的高度</span><br/><span style="font-size: 18px"> var l=0;</span><br/><span style="font-size: 18px"> while (obj){//循环判断这个元素是否存在，存在才执行这个方法</span><br/><span style="font-size: 18px"> t+=obj.offsetTop; // 加上距离父级的距离</span><br/><span style="font-size: 18px"> l+=obj.offsetLeft;</span><br/><span style="font-size: 18px"> obj=obj.offsetParent;// 有父级让他变成他的父级</span><br/><span style="font-size: 18px"> }</span><br/><span style="font-size: 18px"> return {left:l,top:t}; //把值传出去</span><br/><span style="font-size: 18px"> }</span><br/><br/><span style="font-size: 18px"> window.onload=window.onscroll=function () {//滚动的时候和页面加载时执行的一样</span><br/><span style="font-size: 18px"> var aImg=document.getElementsByTagName('img');//获取所有的元素img元素</span><br/><span style="font-size: 18px"> var oSCrollT=document.body.scrollTop || document.documentElement.scrollTop;// 滚动条滚动高度</span><br/><span style="font-size: 18px"> var oClh=document.documentElement.clientHeight;//可视区的高度</span><br/><span style="font-size: 18px"> var oScr=oSCrollT + oClh; // 滚动条高度 + 可视区的高度</span><br/><span style="font-size: 18px"> for(var i=0;i<aImg.length;i++){ //循环所有的img，把它距离页面顶部的距离 和 滚动高度+可视区的高度进行比较</span><br/><span style="font-size: 18px"> if(oScr > getPos(aImg[i]).top){</span><br/><span style="font-size: 18px"> aImg[i].src=aImg[i].getAttribute('_src'); //给src属性赋值</span><br/><span style="font-size: 18px"> }</span><br/><span style="font-size: 18px"> }</span><br/><span style="font-size: 18px"> }</span><br/><span style="font-size: 18px"> </script></span><br/><span style="font-size: 18px"></head></span><br/><span style="font-size: 18px"><body></span><br/><span style="font-size: 18px"> <div id="div"></span><br/><span style="font-size: 18px"> <div><img _src="img/1.jpg"></div></span><br/><span style="font-size: 18px"> <div><img _src="img/2.jpg"></div></span><br/><span style="font-size: 18px"> <div><img _src="img/3.jpg"></div></span><br/><span style="font-size: 18px"> <div><img _src="img/4.jpg"></div></span><br/><span style="font-size: 18px"> <div><img _src="img/5.jpg"></div></span><br/><span style="font-size: 18px"> <div><img _src="img/6.jpg"></div></span><br/><span style="font-size: 18px"> <div><img _src="img/7.jpg"></div></span><br/><span style="font-size: 18px"> <div><img _src="img/8.jpg"></div></span><br/><span style="font-size: 18px"> <div><img _src="img/9.jpg"></div></span><br/><span style="font-size: 18px"> <div><img _src="img/10.jpg"></div></span><br/><span style="font-size: 18px"> <div><img _src="img/11.jpg"></div></span><br/><span style="font-size: 18px"> <div><img _src="img/12.jpg"></div></span><br/><span style="font-size: 18px"> <div><img _src="img/13.jpg"></div></span><br/><span style="font-size: 18px"> <div><img _src="img/14.jpg"></div></span><br/><span style="font-size: 18px"> <div><img _src="img/15.jpg"></div></span><br/><span style="font-size: 18px"> </div></span><br/><span style="font-size: 18px"></body></span><br/><span style="font-size: 18px"></html><br/>今天的内容就到这里，你学会了吗？</span>以上就是图片的懒加载问题的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
685
