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

Home

Web Front-end

CSS Tutorial

An example of lazy loading of images

零下一度

Jun 17, 2017 pm 02:50 PM

aboutloadpictureExampleexplain

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="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"  _ alt="An example of lazy loading of images" ></p></span><br/><span   style="max-width:90%">        <p><img  src="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy"  _ alt="An example of lazy loading of images" ></p></span><br/><span   style="max-width:90%">        <p><img  src="/static/imghwm/default1.png"  data-src="img/3.jpg"  class="lazy"  _ alt="An example of lazy loading of images" ></p></span><br/><span   style="max-width:90%">        <p><img  src="/static/imghwm/default1.png"  data-src="img/4.jpg"  class="lazy"  _ alt="An example of lazy loading of images" ></p></span><br/><span   style="max-width:90%">        <p><img  src="/static/imghwm/default1.png"  data-src="img/5.jpg"  class="lazy"  _ alt="An example of lazy loading of images" ></p></span><br/><span   style="max-width:90%">        <p><img  src="/static/imghwm/default1.png"  data-src="img/6.jpg"  class="lazy"  _ alt="An example of lazy loading of images" ></p></span><br/><span   style="max-width:90%">        <p><img  src="/static/imghwm/default1.png"  data-src="img/7.jpg"  class="lazy"  _ alt="An example of lazy loading of images" ></p></span><br/><span   style="max-width:90%">        <p><img  src="/static/imghwm/default1.png"  data-src="img/8.jpg"  class="lazy"  _ alt="An example of lazy loading of images" ></p></span><br/><span   style="max-width:90%">        <p><img  src="/static/imghwm/default1.png"  data-src="img/9.jpg"  class="lazy"  _ alt="An example of lazy loading of images" ></p></span><br/><span   style="max-width:90%">        <p><img  src="/static/imghwm/default1.png"  data-src="img/10.jpg"  class="lazy"  _ alt="An example of lazy loading of images" ></p></span><br/><span   style="max-width:90%">        <p><img  src="/static/imghwm/default1.png"  data-src="img/11.jpg"  class="lazy"  _ alt="An example of lazy loading of images" ></p></span><br/><span   style="max-width:90%">        <p><img  src="/static/imghwm/default1.png"  data-src="img/12.jpg"  class="lazy"  _ alt="An example of lazy loading of images" ></p></span><br/><span   style="max-width:90%">        <p><img  src="/static/imghwm/default1.png"  data-src="img/13.jpg"  class="lazy"  _ alt="An example of lazy loading of images" ></p></span><br/><span   style="max-width:90%">        <p><img  src="/static/imghwm/default1.png"  data-src="img/14.jpg"  class="lazy"  _ alt="An example of lazy loading of images" ></p></span><br/><span   style="max-width:90%">        <p><img  src="/static/imghwm/default1.png"  data-src="img/15.jpg"  class="lazy"  _ alt="An example of lazy loading of images" ></p></span><br/><span   style="max-width:90%">    </p></span><br/><span style="font-size: 18px"></body></span><br/><span style="font-size: 18px"></html><br/>今天的内容就到这里，你学会了吗？</span>

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Iterating a React Design with Styled ComponentsApr 21, 2025 am 11:29 AM

In a perfect world, our projects would have unlimited resources and time. Our teams would begin coding with well thought out and highly refined UX designs.

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!Apr 21, 2025 am 11:26 AM

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons

SVG Properties in CSS GuideApr 21, 2025 am 11:21 AM

SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex. By leveraging CSS and some of the forthcoming features of the SVG 2 specification, we can reduce that code for cleaner markup.

A Few Functional Uses for Intersection Observer to Know When an Element is in ViewApr 21, 2025 am 11:19 AM

You might not know this, but JavaScript has stealthily accumulated quite a number of observers in recent times, and Intersection Observer is a part of that

Revisting prefers-reduced-motionApr 21, 2025 am 11:18 AM

We may not need to throw out all CSS animations. Remember, it’s prefers-reduced-motion, not prefers-no-motion.

How to Get a Progressive Web App into the Google Play StoreApr 21, 2025 am 11:10 AM

PWA (Progressive Web Apps) have been with us for some time now. Yet, each time I try explaining it to clients, the same question pops up: "Will my users be

The Simplest Ways to Handle HTML IncludesApr 21, 2025 am 11:09 AM

It's extremely surprising to me that HTML has never had any way to include other HTML files within it. Nor does there seem to be anything on the horizon that