核心原理：观察者模式与计算属性

核心原理：观察者模式与计算属性 目前主流的图片延迟加载通常通过两种方式实现📚： Intersection Observer API ：这是浏览器原生提供的接口

实现步骤简述

开发者在代码中创建一个观察者对象，指定一个目标元素（比如页面所有的 <img&📢gt; 标签），当目标元素进入🔍或离开视口（viewport）时，观察者会触发回调函数，在回调中为图片的 src 属性赋值真实图片地址

需要注意的常见误区

这不仅减少首屏传输的字节数，提升页面打开速度，还能🔑帮助搜索引擎爬虫将有限抓取预算优⭐先分配给关键内容

无论采用哪种方式，实现逻辑都可以概括为： 初始将图片的 src 设置为一个占位图或空字符串，将真实地址存放在自定义属性（如 data-src ）中，待图片即将出现在视口时再将 data-src 的值赋给 src

实现步骤简述 准备图片标记 ：为页面中所有需要📢延迟加载的 <img> 标签添加 data-src 属性，填写真实图片URL，同时保留 src 占位（可设置为📢一个极小且经过压缩的占位图，或使用CSS占位背景）

总结

此方式需要手动防抖或节流，避免频繁计算带来性能损耗

为何百度重视图片延迟加载

为何百度重视图片延迟加载 百度搜索对页面加载速度的敏感度一直较高

控制首屏图片数量 ：延迟加载不应作用于首屏可见图片，否😎则会延😎缓首次渲染