优化注意事项

修改 HTML 结构 将需要懒加载💯的 <img> 标签中原本的 src 属性替换为 data-src ，并添加一个占位图片或空白效果

这些库通常封装了性能更好的 Intersection Observer API ，而不是传统的滚动事件监听，🚀能有效避免性能损耗

创建一个 In💫tersectionObserver 实例

为什么要关注网站速度与懒加载

一般建议对以下类型的内容启用懒加载： 首屏之外的图片（如文章正文✨中的插图） 页面底部的广告、横幅或轮播图 用户交互后才需要显示的视频或 iframe 嵌入内容 而网站的 Logo、导航栏图标、首屏主视觉等关键资源，通常应保持立即加载，🔥避免影响用户体验

如果项目对兼容性要求较高，也可以采用原生 JavaScript 加 Intersectio⭐n Observer🚀 的方式实现： 1

兼容性考虑： Intersection Observer 在较老的浏览器（🚀如 IE 11）中可能不被支持

懒加载的核心原理

懒加载的核心原理 懒加载的基本思路是：只有当资源即将✅进入浏览器可视区域时，才触发其加载请求

例如： 原代码： <img src="big-image

一般可以设置为💡 10❤️0px 到 200px

懒加载后的性能验证

本文将以教程形式，手把手介绍如何在网站中实施懒加载，🎨从而提升百度搜索引擎对您网站的友好度

这种机制能大幅减💫少初始 HTTP 请求的数量，降低服务器压力，同时加快首屏呈现速度