Answers:
1)使用CSS Sprites(这是首选方法)。
2)将图像加载到隐藏的div中。将图像放在div中,然后将div的CSS设置display: none;
为隐藏它。
3)用CSS加载图像:
#preloadedImages
{
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();
}
4)使用此JavaScript
<script language="JavaScript">
function preloader()
{
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0]="image1.jpg"
images[1]="image2.jpg"
images[2]="image3.jpg"
images[3]="image4.jpg"
// start preloading
for(i=0; i<=3; i++)
{
imageObj.src=images[i];
}
}
</script>
我不太喜欢javascript解决方案-它很杂乱,难以维护,并且当禁用JS时当然会完全失败。
现代的解决方案是使用CSS Sprites-试试吧,相信我,您会想知道为什么以前从未这样做过;)
我找到了有关如何使用纯CSS预加载图像的链接:
http://www.thecssninja.com/css/even-better-image-preloading-with-css2
当我需要在悬停时更改不同的背景图像时,它对我有用。
在CSS上方添加以下代码:
<script type="text/javascript">
var images = ['img1.jpg', 'img2.jpg'];
for(var i = 0, len = images.length; i < len; i++) {
new Image().src = images[i];
}
</script>
<link rel="stylesheet" type="text/css" href="your_css_file.css" />
如果您按照danp的建议使用sprite路线,则在需要之前加载sprite仍然存在问题。那就是我爱精灵;为了轻松制作它们,我使用了Steve Souders 的spriteme工具: