美团的商家页面会展示商品图片，为了提升用户体验，需要对图片进行懒加载处理。请简述实现图片懒加载的基本原理和步骤。

答题要点

推荐答题框架：采用原理阐述加步骤说明的方式。关键要点如下：1. 原理：图片懒加载的核心原理是在图片进入浏览器可视区域时再进行加载，避免一次性加载大量图片影响页面性能。2. 步骤 - 标记图片：给需要懒加载的图片设置一个自定义属性，如 data - src，将真实的图片地址存放在该属性中。3. 监听滚动事件：监听页面的滚动事件，判断图片是否进入可视区域。4. 加载图片：当图片进入可视区域时，将 data - src 的值赋给图片的 src 属性。示例思路：图片懒加载主要是为了优化性能，先给图片设置自定义属性存真实地址，然后监听滚动，等图片到可视区域就把自定义属性的值赋给 src 来加载图片。