An example of lazy loading of images-CSS Tutorial-php.cn

An example of lazy loading of images

零下一度

Release： 2017-06-17 14:50:55

Original

1555 people have browsed it

When we browse large shopping websites such as Taobao and JD.com, many pictures often appear, and the pictures cost us a lot of traffic.

How do we solve this problem when writing web pages? At this time, we need to use the problem of lazy loading of our images, which not only solves the traffic problem, but also improves performance and so on.

Let’s take a look at the problem with lazy loading of images.

<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>(&#39;img&#39;);//获取所有的元素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(&#39;_src&#39;);  //给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>

Copy after login

The above is the detailed content of An example of lazy loading of images. For more information, please follow other related articles on the PHP Chinese website!