使用JS预加载图片

最近正在使用AJAX写一个Web App，有一个地方的UI需要加载一些零零碎碎的图片，刚开始没太在意，结果后来发现切换到那个页面后那些图片才逐一显示，给人不太流畅的感觉。再三考虑后，想到那些图片对UI元素来说非常重要，决定想办法在用户在其它页面停留时先加载了这个页面的图片。

 

JS代码如下：

function preloadImage()
{
for (var i = 0; i < arguments.length; i++)
{
new Image().src = arguments[i];
}
}

 

使用方法

 

预加载一张图片：

preloadImage("image1.jpg");

 

预加载一系列图片：

preloadImage("image1.jpg", "image2.jpg", "image3.jpg");

 

在需要预加载的图片显示给用户之前调用这个函数即可（当然，你需要预留足够的时间让它加载）