引言
在当今快节奏的互联网环境中，页面加载速度是决定用户体验与留存的关键因素之一。特别是对于图像丰富的网页，大量的图片加载往往会拖慢页面初次呈现的时间。为解决这一挑战，图片懒加载技术应运而生，它能够显著提升页面响应速度，优化用户体验。本文将系统地介绍图片懒加载的概念、原理，并通过实际的代码示例，引导你掌握如何利用JavaScript实现这一优化策略。
一、图片懒加载基础
定义：图片懒加载是一种延迟加载技术，即仅在图片即将进入用户视野时才开始加载，而非页面加载时立即加载所有图片。
优势：减少首屏加载时间，节省流量，提升页面响应速度。
二、浏览器加载机制概览
DOM构建：浏览器解析HTML，构建文档对象模型(DOM)。
CSSOM构建：下载并解析CSS，构建CSS对象模型(CSSOM)。
渲染流程：DOM与CSSOM合并成渲染树，进行布局与绘制。
资源加载：图片等外部资源异步加载。
三、为何采用图片懒加载
首屏加速：优先加载可视区域内容，快速呈现核心信息。
节约资源：避免加载未查看的图片，节省用户流量。
性能优化：减轻服务器压力，提高网站整体性能。
四、实现步骤与代码示例
HTML结构调整
首先，为图片标签使用data-src属性存储图片URL，而非传统的src属性。 因为传统的src属性在html加载的时候，会直接加载，不可控，如果在加载页面的时候同时加载上百张图片，不仅不会阻塞tcp/ip的数据传输，还会影响用户的体验。
对比一下data-src与src的区别
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <img src="http://hbimg.huaban.com/d6beb51da15d69314038b6b79f56b7f6a57e2166137562-ErHeYF"> <img src="http://hbimg.huaban.com/e5df7a7e21cadf899be1c959d32d0ec0ad3c6ae9115241-Jpyztp"> <img src="http://hbimg.huaban.com/65d525a7b29a468c27d4ea61c0c6d47b0b3fc1ce15e986-FRa0vZ"> <img src="http://hbimg.huaban.com/b6220b7dcc6ff85d93118817ba7bab086290fda042f91-UjkM9z"> <img src="http://hbimg.huaban.com/666d8ccf68eb788d5dbb110d9d6afa1876f21a1e160da9-hF5UUE"> </body> </html>
在这里放五张图片，直接使用src属性，会全部生成 
如果使用data-src
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body{
background-color: gray;
}
img{
display: block;
margin-bottom: 50px;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<img data-src="http://hbimg.huaban.com/d6beb51da15d69314038b6b79f56b7f6a57e2166137562-ErHeYF">
<img data-src="http://hbimg.huaban.com/e5df7a7e21cadf899be1c959d32d0ec0ad3c6ae9115241-Jpyztp">
<img data-src="http://hbimg.huaban.com/65d525a7b29a468c27d4ea61c0c6d47b0b3fc1ce15e986-FRa0vZ">
<img data-src="http://hbimg.huaban.com/b6220b7dcc6ff85d93118817ba7bab086290fda042f91-UjkM9z">
<img data-src="http://hbimg.huaban.com/666d8ccf68eb788d5dbb110d9d6afa1876f21a1e160da9-hF5UUE">
</body>
</html>
就不会加载，这就是懒加载的关键，减少不必要的进程，降低服务器和页面的荷载。 
JavaScript实现
获取图片元素
监听滚动事件
判断图片是否可视
动态加载图片 话不多说，直接上代码，如果有不清楚的部分可以借助ai来帮助理解方法和函数
const imgs = document.getElementsByTagName('img');
const num = imgs.length;
let n = 0;
document.addEventListener('DOMContentLoaded',()=>{
loadImage()
});
function loadImage(){
console.log('haha');//添加一个输出来查看函数的运行次数
// 是否在可视区
let screenHeight = document.documentElement.clientHeight;//一屏的高度
//滚动条
//不同浏览器的兼容性问题
let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
for(let i =0;i<num;i++){
// console.log(imgs[i].offsetTop);
if(imgs[i].offsetTop <screenHeight+scrollTop){
//数据属性
//console.log(imgs[i].dataset.src,imgs[i].dataset.price);
imgs[i].src = imgs[i].getAttribute('data-src');
n = i + 1 ;
if(n === num){
window.removeEventListener('scroll',throttleLayLoad);
}
}
}
}
const throttleLayLoad = _.throttle(loadImage,300);
window.addEventListener('scroll',throttleLayLoad);
节流函数：这里使用了Lodash的
_.throttle函数来限制loadVisibleImages函数的执行频率，避免滚动时频繁触发加载逻辑。如果不添加的话，在每一个单位时间就会计算一次
这是添加函数后的执行次数，有明显的减少，如果不满足还可以自己来设置执行的频率
