Rumah >hujung hadapan web >tutorial css >关于图片的懒加载的实例讲解
关于图片的懒加载的实例讲解
- 零下一度asal
- 2017-06-17 14:50:551556semak imbas
我们在浏览淘宝京东等大型购物网页时会经常出现许多图片而图片需要花费我们非常多的流量问题。
我们在写网页的时候怎么解决这个问题呢？这时候就要用到我们图片懒加载的问题，这样不仅可以
解决流量问题，也提高了性能等等。
下面我们就来看一下图片的懒加载怎么问题。
<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"> <a href="http://www.php.cn/wiki/948.html" target="_blank">padding</a>: 0;</span><br/><span style="font-size: 18px"> <a href="http://www.php.cn/wiki/956.html" target="_blank">list-style-type</a>: 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"> #p p{</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"> <a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>: 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=<a href="http://www.php.cn/code/658.html" target="_blank">document</a>.<a href="http://www.php.cn/code/8145.html" target="_blank">getElementsByTagName</a>('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"> <p id="p"></span><br/><span style="font-size: 18px"> <p><img _src="img/1.jpg"></p></span><br/><span style="font-size: 18px"> <p><img _src="img/2.jpg"></p></span><br/><span style="font-size: 18px"> <p><img _src="img/3.jpg"></p></span><br/><span style="font-size: 18px"> <p><img _src="img/4.jpg"></p></span><br/><span style="font-size: 18px"> <p><img _src="img/5.jpg"></p></span><br/><span style="font-size: 18px"> <p><img _src="img/6.jpg"></p></span><br/><span style="font-size: 18px"> <p><img _src="img/7.jpg"></p></span><br/><span style="font-size: 18px"> <p><img _src="img/8.jpg"></p></span><br/><span style="font-size: 18px"> <p><img _src="img/9.jpg"></p></span><br/><span style="font-size: 18px"> <p><img _src="img/10.jpg"></p></span><br/><span style="font-size: 18px"> <p><img _src="img/11.jpg"></p></span><br/><span style="font-size: 18px"> <p><img _src="img/12.jpg"></p></span><br/><span style="font-size: 18px"> <p><img _src="img/13.jpg"></p></span><br/><span style="font-size: 18px"> <p><img _src="img/14.jpg"></p></span><br/><span style="font-size: 18px"> <p><img _src="img/15.jpg"></p></span><br/><span style="font-size: 18px"> </p></span><br/><span style="font-size: 18px"></body></span><br/><span style="font-size: 18px"></html><br/>今天的内容就到这里，你学会了吗？</span>Atas ialah kandungan terperinci 关于图片的懒加载的实例讲解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：用CSS3+ jQuery实现一个视差效果的实例Artikel seterusnya：html打造动漫人物--哆啦A梦