懒加载代码实现html<!DOCTYPE html><html lang=“en”><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>Document</title> <link rel=“stylesheet” href=“lazyload.css”></head><body> <div class=“image-list”> <img src="" class=“image-item” lazyload=“true” data-original=“https://img.alicdn.com/imgextra/i2/252339290/TB29PYUXnIlyKJjSZFrXXXn2VXa_!!252339290-0-beehive-scenes.jpg_180x180xzq90.jpg_.webp" alt=”"> <img src="" class=“image-item” lazyload=“true” data-original=“https://img.alicdn.com/imgextra/i4/2260152888/O1CN01vw2e251XCkJr0VPZU_!!2260152888-0-beehive-scenes.jpg_250x250xz.jpg" alt=”"> <img src="" class=“image-item” lazyload=“true” data-original=“https://img.alicdn.com/imgextra/i3/24687421/TB2Xg1izsyYBuNkSnfoXXcWgVXa_!!24687421-0-beehive-scenes.jpg_250x250xz.jpg" alt=”"> <img src="" class=“image-item” lazyload=“true” data-original=“https://img.alicdn.com/imgextra/i4/890151842/TB2II1mnZbI8KJjy1zdXXbe1VXa_!!890151842-0-beehive-scenes.jpg_250x250xz.jpg" alt=”"> <img src="" class=“image-item” lazyload=“true” data-original=“https://img.alicdn.com/imgextra/i2/2096513830/TB2l1W0kRnTBKNjSZPfXXbf1XXa_!!2096513830-0-beehive-scenes.jpg_250x250xz.jpg" alt=”"> <img src="" class=“image-item” lazyload=“true” data-original=“https://img.alicdn.com/imgextra/i3/2586222636/TB2RDGrpqAoBKNjSZSyXXaHAVXa_!!2586222636-0-daren.jpg_250x250xz.jpg" alt=”"> <img src="" class=“image-item” lazyload=“true” data-original=“https://img.alicdn.com/imgextra/i2/1870112525/TB2Ae.xbOwIL1JjSZFsXXcXFFXa_!!1870112525-2-beehive-scenes.png_250x250xz.jpg" alt=”"> <img src="" class=“image-item” lazyload=“true” data-original=“https://img.alicdn.com/imgextra/i2/2194952831/TB2PwWty7qvpuFjSZFhXXaOgXXa_!!2194952831-0-beehive-scenes.jpg_250x250xz.jpg" alt=”"> </div> <script src="./lazyload.js"></script></body></html>css.image-item { display: inline-block; width: 100%; height: 300px; background: gray;}jsvar viewHeight = document.documentElement.clientHeight;function lazyload() { var eles = document.querySelectorAll(‘img[data-original][lazyload]’); eles.forEach(function(item){ var rect; if (item.dataset.original === ‘’) { return } rect = item.getBoundingClientRect(); if (rect.bottom >= 0 && rect.top < viewHeight) { (function() { var img = new Image(); img.src = item.dataset.original; console.log(img.src) img.onload = function() { item.src = img.src; } item.removeAttribute(‘data-original’) item.removeAttribute(’lazyload’) })() } })}lazyload();document.addEventListener(‘scroll’, lazyload)效果蓝色为已经请求加载的图片红色为还没有请求加载的图片默认打开，没有操作前向下滚动前向下滚动后冷门属性ocument.addEventListener（事件监听）document.addEventListener(‘scroll’, function() { console.log(‘aa’)})img.onload事件在图片加载完成后立即执行getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性文档各种高度document.documentElement.clientHeight:视口的大小document.documentElement.scrollHeight:文档的大小document.documentElement.offsetHeight:文档的大小
