什么是图片预加载
在播放不同大小尺寸的幻灯片的时候,我们需要及时接收下一张图片的尺寸,这样能够更好的处理实现效果,用户体验也非常不错。这样在图片没有加载完毕就已经获得该图片尺寸的技术称为图片预加载
如何判断图片预加载完成
可能你已经了解了,在浏览器渲染图片的时候,它获得图片的一片区域的时候,就已经为这张图片预留了一块空白的区域来填充图片,这就是预加载获得图片尺寸最原始的使用方法。但是,在js里面并不能获得这个事件,只有通过图片获得尺寸这一刻来确认图片已经预加载完成。
可以这么做,图片的初始尺寸为0,当尺寸不为0的时候,则确认这张图片预加载结束。如:
|
|
# 如果图片缓存了
如果图片缓存了,我们可以更快的从缓存图片中读取图片的尺寸,而不必等待图片的预加载完成。如:
|
|
当然,预加载和缓存结合起来的话,必须先判断缓存。
完整的预加载读取尺寸函数
|
|
这段代码来自前辈的博客。这里借来一用了。
demo
实例演示: