이미지 지연 로딩 문제-HTML 튜토리얼-php.cn

이미지 지연 로딩 문제

巴扎黑

풀어 주다： 2017-06-26 15:18:38

원래의

2002명이 탐색했습니다.

타오바오, JD.com 등 대형 쇼핑 사이트를 탐색하다 보면 사진이 자주 등장하는데, 그 사진으로 인해 트래픽이 많이 발생합니다.

웹 페이지를 작성할 때 이 문제를 어떻게 해결합니까? 이때 우리는 이미지의 지연 로딩 문제를 활용해야 합니다. 이는 트래픽 문제를 해결할 수 있을 뿐만 아니라 성능도 향상시킬 수 있습니다.

이미지 로딩 지연 문제를 살펴보겠습니다.

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!