如何加快图片显示

CSS code

#menu ul li a.index{
    background:url(../images/index.png) no-repeat;
}
#menu ul li a.index:hover{
    background:url(../images/indexh.png) no-repeat;
}

CSS是这样写的
还有个广告切换

导航hover之后 图片才开始加载 
效果就是 鼠标不悬浮的时候 是index.png图片 悬浮之后 因为开始加载indexh.png图片 会有1秒左右的间隔才会显示indexh.png这张图

广告切换也是这个问题
用JS控制CSS的background-Image
3秒一切
但也是切到这张图片的时候
才开始加载这张图片

大虾们 这是为什么呢
有什么解决方案告知小弟一下

------解决方案--------------------
html代码增加
<img src="../images/index.png" style="display:none" alt="" />
这个图片初始页面加载不会显示 鼠标上去后马上就能出来了
------解决方案--------------------
控制使所有的dom元素load完了在加载图片
Jquery（document）.ready(function(){
//这里开始加载图片
});