前端面试，常见图片懒加载方式有哪些？

在前端面试中，常见的图片懒加载方式主要有以下几种：

1. 使用loading属性：现代浏览器支持<img>标签的loading属性，将其值设为lazy，可实现图片延迟加载，只有当图片滚动到所在位置才会显示。属性值还有eager，默认值为eager，表示图像立即加载 。这是实现懒加载最简单的方法，无需额外JavaScript代码。不过它存在一些缺点，加载触发点不稳定、不可控，不同浏览器及版本、网络环境下触发条件不同；会延迟首屏关键图加载，影响首次内容绘制（FCP）性能；加载状态不可监听，无法实现加载动画、失败容错处理及渐进式加载体验；使用场景局限，仅适用于<img>和<iframe>标签 。
2. 利用IntersectionObserver API：该API可异步检测目标元素与祖先元素或顶级文档视口相交情况的变化。创建IntersectionObserver实例时，传入可见性变化的回调函数callback和配置对象option（可选）。对于需要懒加载的图片，用data - src代替src存储真实图片地址。当观察到图片进入视口（通过判断回调函数参数IntersectionObserverEntry对象的isIntersecting属性为true），将data - src的值赋给src，从而实现图片加载。这种方式功能强大、灵活，能满足加载控制、动画处理、骨架屏等需求，但代码相对复杂 。
3. 结合getBoundingClientRect和事件监听：在旧版本浏览器不支持IntersectionObserver API时，可使用getBoundingClientRect方法获取元素位置和大小信息，结合scroll、resize等事件监听来实现懒加载。通过判断元素的top值处于0到视口高度之间，确定元素进入可视区，进而加载图片。但这种方式兼容性存在问题，且频繁监听事件可能影响性能 。
4. 使用第三方库：如lazysizes和lozad.js等。以lazysizes为例，引入库文件后，给<img>标签添加lazyload类和data - src属性（取代src），库会自动处理懒加载逻辑。使用第三方库可快速实现功能，通常还提供丰富的配置选项，但会增加项目依赖，引入外部库可能影响页面加载速度，存在版本兼容性风险 。
5. 在框架中使用特定方法
   • Vue中使用vue - lazyload插件：先通过npm install vue - lazyload --save安装插件，在项目入口文件（如main.js）引入并使用，可配置加载时的占位图、加载失败时的图像等选项。在组件中使用v - lazy指令替换src属性实现图片懒加载 。
   • React中使用React.lazy结合Suspense组件：创建懒加载组件包装图片，使用React.lazy动态导入该组件，配合Suspense组件在组件加载时显示加载状态。不过React.lazy目前仅支持默认导出，如果要加载的组件是命名导出，需用中间模块重新导出为默认模块 。