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

它的核心思想是：页面加载时，只加⚡载用户视觉窗口内可见的图片，而将屏幕外的图片留🚀待滚动到附近时再请求加载

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

测试与优化 ：在百度搜索资源平台中提交页面，观📚察爬虫抓取日志，确保延迟加载后的图片仍能被正常发现

需要注意的常见误区

兼容小尺寸占位 ❤️：使用CSS设置宽高比（aspect-ratio），或通过 width 和 height 🌈属性固定尺寸，能有效避免图片加载瞬间的页面跳动

实现步骤简述

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

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

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