<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>性能优化:图片的懒加载</title> </head> <style> * { margin: 0; padding: 0 } img { display: block; width: 100%; height: 300px; margin-bottom: 20px; } </style> <body> <img data-src="https://i.loli.net/2021/05/25/qGv38DdNOVFgLP4.jpg" alt=""> <img data-src="../06image/2.jpg" alt=""> <img data-src="../06image/3.jpg" alt=""> <img data-src="../06image/4.jpg" alt=""> <img data-src="../06image/5.jpg" alt=""> <img data-src="../06image/6.jpg" alt=""> <img data-src="../06image/7.jpg" alt=""> <img data-src="../06image/8.jpg" alt=""> <img data-src="../06image/9.jpg" alt=""> <img data-src="../06image/10.jpg" alt=""> <img data-src="../06image/1.jpg" alt=""> <img data-src="../06image/2.jpg" alt=""> </body> <script> // 法2:================================================================= // api说明 // getBoundingClientRect()//获取元素的大小及位置 位置:相对于左上角 var imgs = document.querySelectorAll(‘img‘); //是否在可视区域内:元素的top <= 可视区域的高度 function isIn(el) { var bound = el.getBoundingClientRect(); var clientHeight = window.innerHeight; return bound.top <= clientHeight; } function loadImg(el) { if (!el.src) { var source = el.dataset.src; el.src = source; } } //检查图片是否在可视区内,如果不在,则加载 function check() { Array.from(imgs).forEach(function (el) { if (isIn(el)) { loadImg(el); } }) } window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发 check(); } </script> </html>
说明:getBoundingClientRect获取的位置如图所示,top <= clientHeight则进入可视区域,加载图片
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>性能优化:图片的懒加载</title> </head> <style> * { margin: 0; padding: 0 } img { display: block; width: 100%; height: 300px; margin-bottom: 20px; } </style> <body> <img data-src="https://i.loli.net/2021/05/25/qGv38DdNOVFgLP4.jpg" alt=""> <img data-src="../06image/2.jpg" alt=""> <img data-src="../06image/3.jpg" alt=""> <img data-src="../06image/4.jpg" alt=""> <img data-src="../06image/5.jpg" alt=""> <img data-src="../06image/6.jpg" alt=""> <img data-src="../06image/7.jpg" alt=""> <img data-src="../06image/8.jpg" alt=""> <img data-src="../06image/9.jpg" alt=""> <img data-src="../06image/10.jpg" alt=""> <img data-src="../06image/1.jpg" alt=""> <img data-src="../06image/2.jpg" alt=""> </body> <script> // 法1: // api说明 // document.documentElement.clientHeight//获取屏幕可视区域的高度 // element.offsetTop//获取元素(待加载图片)相对于文档顶部的高度,元素相对于其父元素容器顶部的距离 // document.documentElement.scrollTop获取浏览器窗口顶部与文档顶部之间的距离,也就是滚动条滚动的距离 var imgs = document.querySelectorAll(‘img‘); // 获取元素(待加载图片)相对于文档顶部的高度 function getTop(e) { var T = e.offsetTop; //offsetTop是元素与offsetParent的距离,循环获取直到页面顶部 // offsetTop是相对于父元素的,所以上面带吗有一个offsetParent。 // while(e = e.offsetParent) { // T += e.offsetTop; // } return T; } function lazyLoad(imgs) { var H = document.body.clientHeight; // 网页可见区域高 // document.documentElement.clientHeight; // 可见区域高度 var S = document.documentElement.scrollTop || document.body.scrollTop; for (var i = 0; i < imgs.length; i++) { // 进入可视区域,加载图片 if (H + S > getTop(imgs[i])) { imgs[i].src = imgs[i].getAttribute(‘data-src‘); } } } window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发 lazyLoad(imgs); } </script> </html>
说明:offsetTop获取的高度如图所示,因此 可视区域高度+scrollTop > offetTop时 表示进入可视区域,加载图片
图片懒加载的原理就是暂时不设置图片的 src 属性,而是将图片的 url 隐藏起来,比如先写在 data-src 里面,等当前图片是否到了可视区域再将图片真实的 url 放进 src 属性里面,从而实现图片的延迟加载。
获取元素的data-src的方式有如下两种方式:
var source = el.dataset.src; el.src = source;
imgs[i].src = imgs[i].getAttribute(‘data-src‘);
原文:https://www.cnblogs.com/ljingjing/p/14808534.html