方向
全部语言教程功能实现面试题运维工具脚本AI 实践
分类
全部Go 教程Python 教程JavaScript 教程TypeScript 教程Rust 教程PHP 教程Java 教程

分类： JavaScript 教程

用 IntersectionObserver 实现图片懒加载与占位占高

列表页一次性渲染 200 张商品图，首屏要下载十几 MB 的图片，用户滑动时白屏、闪烁、滚动位置乱跳，这是最典型的图片加载问题。把 loading="lazy" 加在 <img> 上只能解决「什么时候下载」，解决不了「下载之前这块地方占多高」。图片没有尺寸，浏览器在图片解码前把它当 0 高度处理，图片到达后页面被撑开，原本已经滚到第 80 条的用