字节跳动旗下的产品注重用户体验，在网页中经常会有图片懒加载的需求。请简述图片懒加载的原理和实现方式。

答题要点

可以采用原理 - 实现方式的分层分析法来答题。关键要点如下：1. 原理：图片懒加载是为了减少初始加载时的资源消耗，只在图片进入用户可视区域时才进行加载。这样可以提高页面的加载速度和性能。2. 实现方式：一种常见的方法是通过监听窗口的滚动事件，计算图片的位置和窗口的滚动位置，判断图片是否进入可视区域。另一种方法是使用 HTML 的 loading 属性，将其设置为 'lazy'，浏览器会自动处理懒加载。3. 数据属性应用：在 HTML 中，可以使用自定义数据属性（如 data - src）来存储图片的真实地址，初始时将 img 标签的 src 属性设置为占位图，当图片进入可视区域时，再将 data - src 的值赋给 src。示例思路：图片懒加载的原理是按需加载图片，提高性能。实现上可以通过监听滚动事件结合自定义数据属性，当图片进入可视区域时替换 src 属性值，也可以直接使用 loading='lazy'。