在 SHEIN 的前端页面中，我们经常需要处理商品图片的懒加载。请用原生 JavaScript 实现一个简单的图片懒加载功能。

答题要点

推荐使用分层分析法解答此题。首先明确目标是实现图片懒加载，然后分步骤进行。关键要点如下：1. 监听滚动事件，当页面滚动时触发检查图片是否进入可视区域的逻辑。可以使用 `window.addEventListener('scroll', function() {})` 来监听滚动。2. 判断图片是否进入可视区域，可通过元素的 `getBoundingClientRect()` 方法获取元素的位置信息，与视口高度对比。3. 当图片进入可视区域时，将 `data-src` 属性的值赋给 `src` 属性，实现图片加载。示例话术：首先，我会监听页面的滚动事件，在滚动时遍历所有需要懒加载的图片，通过 `getBoundingClientRect()` 判断图片是否进入可视区域，如果进入则将 `data-src` 赋值给 `src`。