app教程网 学习教程 js 图片预加载(html预加载图片)

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

由于javascript无法获取img文件的头数据,必须等到加载后才能获取真实大小,所以lightbox类效果的速度体验比直接输出以便在中央显示图片要差很多。

文中提到的预加载技术主要是让javascript快速获取图片头数据的大小。

使用预加载获取图片大小的典型示例:

可以看到使用onload的方式必须等待图片加载,其速度不敢恭维。

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

十几年的上网经验告诉我,浏览器加载图片的时候,你会看到图片会先占一块地再慢慢加载,而且这里的图片大多没有预设的宽度和高度属性,因为浏览器可以获取图片的表头数据。基于此,

你只需要用javascript定期检测图片的大小状态就可以知道图片的大小就绪状态。

实施代码:

简单吗?这样获取摄影级别照片大小的速度往往是onload模式的几十倍,但对于网页上普通(800600)浏览级别的图片,却能达到秒杀效果。

本文来自网络,不代表本站立场,转载请注明出处:https: