最近正在使用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");
在需要预加载的图片显示给用户之前调用这个函数即可(当然,你需要预留足够的时间让它加载)