原生浏览器懒加载不符合预期：会加载视口外图片

初始加载视口外图片是正常的吗？ #

是正常的。原生懒加载不是死板地只加载视口内的图，浏览器会自己计算一个预加载范围（一般是视口高度的1-2倍），提前加载这个范围内的图片，避免你滚动时突然出现加载空白。这个范围是浏览器自带的策略，不同浏览器可能略有区别。

为啥每次刷新加载的图片数量不一致？ #

主要有这几个原因，对应可以这么排查：

• 缓存搞的鬼：之前加载过的图片会存在浏览器缓存里，刷新时直接读缓存，不会发新请求，看起来就像加载数量变了。你可以开开发者工具，在Network面板勾上「Disable cache」，再刷新几次看看数量是不是一致了。
• 页面布局晃来晃去：就算你给图片设了宽高，如果页面里其他动态渲染的元素（比如React组件异步加载、动态内容）导致布局偏移，浏览器计算图片位置的时候就会有波动，预加载的范围跟着变。解决办法：给图片容器固定aspect-ratio或者明确宽高，让布局稳下来；优化React组件，别让它随便重渲染导致布局抖动。
• 浏览器资源调度优先级变了：每次刷新时，页面的脚本、样式加载顺序可能有点不一样，浏览器分配给图片预加载的优先级也会变，导致加载数量波动。可以把非关键脚本设成async或defer，让核心资源先加载，减少资源竞争。

额外小贴士 #

• 换Chrome、Firefox几个主流浏览器测一测，看看是不是某个浏览器的特有行为。
• 对比你自己的React应用和那个稳定示例的DOM结构、渲染流程，比如示例是静态DOM，你的是React动态渲染组件，这可能导致浏览器计算图片位置的时机不一样，进而影响预加载逻辑。

内容的提问来源于stack exchange，提问作者Reshma