react 图片预加载(js 图片预加载)

因为javascript无法获取img文件的头数据，所以要等它加载后才能获取真实大小。所以lightbox类效果的速度体验比为了画面居中而直接输出要差很多。文中提到的预加载技术，主要是让javascript快速获取图片头部数据的大小。

使用预加载获取图像大小的典型示例：

可以看到使用onload要等图片加载完，速度不敢恭维。

Web应用不同于桌面应用，响应速度是最好的用户体验。如果你想既有速度又有优雅，你必须提前得到图片尺寸。如何在图片加载前获取图片大小？

十几年的上网经验告诉我：浏览器加载图片的时候，你会看到图片会先占一块地再慢慢加载，而且这里的图片大多没有预设的宽度和高度属性，因为浏览器可以获取图片的表头数据。基于此，我们只需要使用javascript定期检测图片的大小状态就可以知道图片大小的就绪状态。

实施代码：

这不是很简单吗？这样获取摄影级照片大小的速度往往是onload的几十倍，对于网页上一般浏览级的图片(800600以内)也能达到秒杀的效果。