网站懒加载实现：优化长页面性能

页面内容多，图片视频多，加载会很慢。懒加载就是先加载可见区域的内容，其他等滚动到附近再加载。这篇文章说说懒加载的实现。

懒加载的好处

减少首屏加载时间，用户更快看到内容。节省流量，用户没滚动到的内容不加载。降低服务器压力，请求分散了。

图片懒加载

原生懒加载最简单，img标签加loading="lazy"属性就行。浏览器自动处理，兼容性也越来越好。

要兼容老浏览器，可以用Intersection Observer API自己实现。或者用lazysizes这种成熟库。

其他资源懒加载

iframe也可以懒加载，加loading="lazy"。视频、音频同样适用。

JS代码也可以按需加载，用动态import()，需要时再加载模块。

注意事项

首屏的图片不要懒加载，否则用户打开看到的是空白。要给懒加载元素设置占位高度，避免布局跳动。

懒加载是性能优化的重要手段，实现简单效果明显，推荐每个网站都用。