web性能优化之js图片懒加载

Posted 2020-10-11 CSS is awesome

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web性能优化之js图片懒加载相关的知识，希望对你有一定的参考价值。

<div class="container">
			<ul>
				<li>
					<div id="first" class="pic"><img src=""  trueimg="./img/HBuilder.png" /></div>
					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000001</div>
				</li>
				<li>
					<div class="pic"><img src=""  trueimg="./img/timg.jpg" /></div>
					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000002</div>
				</li>
				<li>
					<div class="pic"><img src=""  trueimg="./img/timg.jpg" /></div>
					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000003</div>
				</li>
				<li>
					<div class="pic"><img src=""  trueimg="./img/timg.jpg" /></div>
					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000004</div>
				</li>
				<li>
					<div class="pic"><img src=""  trueimg="./img/timg.jpg" /></div>
					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000005</div>
				</li>
				<li>
					<div class="pic"><img src=""  trueimg="./img/timg.jpg" /></div>
					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000006</div>
				</li>
				<li>
					<div class="pic"><img src=""  trueimg="./img/timg.jpg" /></div>
					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000007</div>
				</li>
				<li>
					<div class="pic"><img src=""  trueimg="./img/timg.jpg" /></div>
					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000008</div>
				</li>
				<li>
					<div class="pic"><img src=""  trueimg="./img/timg.jpg" /></div>
					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000009</div>
				</li>
				<li>
					<div class="pic"><img src=""  trueimg="./img/timg.jpg" /></div>
					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000010</div>
				</li>
				<li>
					<div class="pic"><img src=""  trueimg="./img/timg.jpg" /></div>
					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000011</div>
				</li>
				<li>
					<div class="pic"><img src=""  trueimg="./img/timg.jpg" /></div>
					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000012</div>
				</li>
				<li>
					<div class="pic"><img src=""  trueimg="./img/timg.jpg" /></div>
					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000013</div>
				</li>
				<li>
					<div class="pic"><img src=""  trueimg="./img/timg.jpg" /></div>
					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000014</div>
				</li>
				<li>
					<div class="pic"><img src=""  trueimg="./img/timg.jpg" /></div>
					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000015</div>
				</li>
				<li>
					<div class="pic"><img src=""  trueimg="./img/timg.jpg" /></div>
					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000016</div>
				</li>
				<li>
					<div class="pic"><img src=""  trueimg="./img/timg.jpg" /></div>
					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000017</div>
				</li>
				<li>
					<div class="pic"><img src=""  trueimg="./img/timg.jpg" /></div>
					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000018</div>
				</li>
				<li>
					<div class="pic"><img src=""  trueimg="./img/timg.jpg" /></div>
					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000019</div>
				</li>
				<li>
					<div class="pic"><img src=""  trueimg="./img/timg.jpg" /></div>
					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000020</div>
				</li>
			</ul>
		</div>

　　css

            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            
            li {
                margin-top: 10px;
                border-bottom: 1px solid #000;
                list-style: none;
                height: 100px;
            }
            
            .pic {
                width: 200px;
                padding: 10px;
                height: 100px;
                float: left;
                background: url(img/timg.gif) no-repeat center center;
                background-size: cover;
                background-origin: content-box;
            }
            
            .pic img {
                opacity: 0;
                display: none;
                border: 1px solid #000;
                width: 100%;
                height: 100%;
            }
            
            li:last-child {
                margin-bottom: 10px;
            }
            
            .txt {
                height: 100px;
                line-height: 100px;
                overflow: hidden;
            }

var imgList = document.querySelectorAll("img");
            var len = imgList.length;

            function loadImg(curImg) {

                var truesrc = curImg.getAttribute("trueimg");
                var oImg = new Image();
                var curPar = curImg.parentNode;

                oImg.src = truesrc;

                oImg.onload = function() {
                    curImg.src = this.src;
                    curImg.style.display = "block";
                    curPar.style.background = "none";
                    fadeIn(curImg);
                    oImg = null;
                }
                curImg.isLoaded = true;

            }

            function fadeIn(curImg) {
                var tar = 1;
                var interval = 10;
                var duration = 500;
                var step = (tar / duration) * interval;
                var curOp = parseFloat(getComputedStyle(curImg, null)["opacity"]);

                var timer = window.setInterval(function() {
                    if(curOp > 1) {
                        curImg.style.opacity = 1;
                        window.clearInterval(timer);
                    }
                    curOp += step;
                    curImg.style.opacity = curOp;
                }, interval);
            }

            function handleImg() {
                for(var i = 0; i < len; i++) {
                    var curImg = imgList[i];
                    if(curImg.isLoaded) {
                        continue;
                    }
                    var curPar = curImg.parentNode;
                    var a = curPar.clientHeight + curPar.offsetTop;
                    var b = document.documentElement.clientHeight + document.documentElement.scrollTop;
                    if(a < b) {
                        loadImg(curImg);
                    }
                }
            }

            setTimeout(handleImg, 1000);

            window.onscroll = handleImg;

设置定时器延迟加载图片，优化网站打开时间，当图片出现在可见范围就加载图片，否则就不加载。

以上是关于web性能优化之js图片懒加载的主要内容，如果未能解决你的问题，请参考以下文章