请用 JavaScript 和 HTML 编写一段实现图片懒加载的具体代码，并说明其工作原理。

回答思路

1. 【回答框架 1】懒加载的核心思想是延迟加载，即图片进入视口前不加载，进入视口后才加载真实资源。实现方式通常是在 img 标签的 src 属性中放置占位图或空值，将真实地址存放在 data-src 属性中。
2. 【回答框架 2】监听 scroll 事件，在事件回调中遍历所有需要懒加载的图片，使用 getBoundingClientRect 获取图片相对于视口的位置，判断其 top 值是否小于视口高度，若小于则说明图片即将进入视口，此时将 data-src 的值赋给 src，并移除监听或标记已加载。
3. 【回答框架 3】为提高性能，可使用 IntersectionObserver API 替代 scroll 监听，它能在元素进入视口时自动触发回调，无需手动计算位置，且不会频繁触发导致性能问题。回调中同样将 data-src 替换为 src，并停止观察该元素。
4. 【回答框架 4】需注意占位图的使用，避免页面布局因图片未加载而跳动。同时要处理图片加载失败的情况，可设置 onerror 事件替换为默认图。对于不支持 IntersectionObserver 的浏览器，可回退到 scroll 监听方案。
5. 【回答框架 5】代码实现时，先获取所有带有 data-src 的 img 元素，初始化时先检查是否已支持 IntersectionObserver，若支持则创建观察者实例并逐个观察；否则绑定 scroll 事件并立即执行一次检查。
6. 【关键点 1】使用 data-src 存放真实图片地址，src 初始为占位图或空。
7. 【关键点 2】IntersectionObserver 比 scroll 监听更高效，能自动检测元素进入视口。
8. 【关键点 3】替换 src 后需停止观察或移除监听，避免重复加载。
9. 【关键点 4】需处理图片加载失败和浏览器兼容性回退。
10. 【关键点 5】懒加载能减少初始请求数，提升页面加载速度。
11. 【易错点 1】不要将 src 直接设为空字符串，可能导致浏览器发起当前页面的请求。
12. 【易错点 2】scroll 监听需使用节流或防抖，否则频繁触发影响性能。
13. 【易错点 3】若图片在页面加载时已在视口内，需立即加载，否则会延迟显示。