Tag Archives: preload image

在网页设计时，图片替换作为一种页面装饰方法被广泛使用。
简单来讲，当我们鼠标滑过某张图片时，图片会被替换成其他图片，比如说一张反色高亮图片，来表示鼠标正在划过。

但这样做经常遇到一个问题：当鼠标滑过，图片需要替换，但网速比较慢，那会出现一小段时间内，替换图片无法显示出来的情况，影响用户的浏览体验。
为了应对这种情况，图片预加载就应运而生了。

所谓预加载：就是在网页打开之初，就把当前并没有使用，但页面处理中可能会用到的图片下载，以便之后调用时免去下载的时间。

我们来看下预加载是如果做到的

JS中，我们可以动态的添加元素，当然包括图片：

var an_image = new Image();
an_image.src = "http://www.test.com/a.jpg"

当我们执行这段JS时，图片就在后台加载了，可以通过Firebug查看。
之后如果页面调用了http://www.test.com/a.jpg这张图片，将不会重新下载图片，而是直接显示出来。
(more…)