请解释懒加载的概念，并说明在前端开发中，如何具体实现图片的懒加载？

回答思路

1. 【回答框架 1】懒加载是一种按需加载资源的优化策略，核心思想是延迟加载某些资源（如图片），直到用户即将需要它们时才加载，从而提升初始页面加载速度和节省网络带宽。
2. 【回答框架 2】实现图片懒加载的一种常见方法是利用HTML的自定义属性（如data-src）存放真实图片地址，当图片进入视口时，通过JavaScript将data-src的值赋给src属性。具体实现可使用IntersectionObserver监听元素与视口的交叉状态，当图片可见时触发加载。这是现代浏览器的推荐方式。
3. 【回答框架 3】另一种兼容性更广的方法是监听scroll和resize事件，通过计算图片元素与视口的位置关系（如getBoundingClientRect）判断是否可见，从而决定是否加载。但需要注意性能优化，例如使用节流（throttle）或防抖（debounce）减少事件触发频率。
4. 【回答框架 4】在实际项目中，还可以借助成熟的第三方库（如lozad.js、lazysizes）来快速实现图片懒加载，这些库封装了上述原理，并处理了边界情况，如动态添加的图片、滚动的节流和兼容性问题。
5. 【关键点 1】懒加载是一种按需加载策略，核心目的是提升首屏加载性能和节省资源。
6. 【关键点 2】实现懒加载的核心是将图片的真实地址存储在data-src等自定义属性中，待图片进入视口后再替换到src。
7. 【关键点 3】IntersectionObserver是实现懒加载的现代推荐方案，性能优于基于scroll事件的监听。
8. 【易错点 1】如果图片不设置固定的宽高，懒加载可能会引起页面布局抖动，因此需要预留占位尺寸。
9. 【易错点 2】对于首屏即可见的图片，应立即加载，无需懒加载，否则可能延迟加载导致用户体验下降。
10. 【易错点 3】在滚动事件中实现懒加载时，如果未进行节流或防抖，会导致性能问题，尤其在移动端。