本文在github做了收录 /Michael-lzg…
demo源码地址 /Michael-lzg…
为什么要进行图片懒加载
我们先来看一下页面启动时加载的图片信息。
图片懒加载的原理
我们先来看下页面结构
<head><meta charset="UTF-8" /><title>Lazyload</title><style>img {display: block;margin-bottom: 50px;height: 200px;width: 400px;}</style></head><body><img src="./img/default.png" data-src="./img/1.jpg" /><img src="./img/default.png" data-src="./img/2.jpg" /><img src="./img/default.png" data-src="./img/3.jpg" /><img src="./img/default.png" data-src="./img/4.jpg" /><img src="./img/default.png" data-src="./img/5.jpg" /><img src="./img/default.png" data-src="./img/6.jpg" /><img src="./img/default.png" data-src="./img/7.jpg" /><img src="./img/default.png" data-src="./img/8.jpg" /><img src="./img/default.png" data-src="./img/9.jpg" /><img src="./img/default.png" data-src="./img/10.jpg" /></body></html>
function lazyload() {let viewHeight = document.body.clientHeight //获取可视区高度let imgs = document.querySelectorAll('img[data-src]')imgs.forEach((item, index) => {if (item.dataset.src === '') return// 用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置let rect = item.getBoundingClientRect()if (rect.bottom >= 0 && rect.top < viewHeight) {item.src = item.dataset.srcitem.removeAttribute('data-src')}})}
getBoundingClientRect函数解释：
rectObject = object.getBoundingClientRect();
window.addEventListener('scroll', lazyload)
function throttle(fn, delay) {let timerlet prevTimereturn function (...args) {const currTime = Date.now()const context = thisif (!prevTime) prevTime = currTimeclearTimeout(timer)if (currTime - prevTime > delay) {prevTime = currTimefn.apply(context, args)clearTimeout(timer)return}timer = setTimeout(function () {prevTime = Date.now()timer = nullfn.apply(context, args)}, delay)}}
window.addEventListener('scroll', throttle(lazyload, 200))
IntersectionObserver 实现懒加载
地址：/post/6903774214780616718#heading-2
