奇宝库 > javascript的核心技术(javascript图片)

javascript的核心技术(javascript图片)

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

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

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

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

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

实施代码:

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

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