图片预加载效果在大量的网站都有使用,特别是使用图片较多的网站,下面就介绍一下图片预加载的作用和用法。

比如一个网站,上面有很多这样的效果,当鼠标放在一个图片的时候,能够切换成另一张图片,如果图片在本地没有缓存的,需要从服务器下载的话,那么可能记载需要一段的事件,那么将会影响用户体验,如果将图片事先下载缓存起来,就可以实现快速切换了。

下面就介绍一下如何实现图片预加载:
   [ 其他 ] 运行代码    下载代码
<script>
var imagePreload=new Image(); 
imagePreload.src="001.gif"; 
imagePreload.src="002.gif"; 
imagePreload.src="003.gif";
</script>
以上代码就可以实现图片预加载,因为当执行到imagePreload.src="001.gif"这样的语句的时候,就会从服务器下载图片,这样图片就会被存入缓存,然后再下载第二个,如此进行下去。不过上面的代码比较适合于少量图片预加载。

大量图片预加载可以使用如下代码:
   [ 其他 ] 运行代码    下载代码
<script>
function imagePreload(){ 
  var imgPreload=new Image(); 
  for(i=0;i<arguments.length;i++) { 
    imgPreload.src = arguments<i>; 
  } 
} 
imagePreload('001.gif','002.gif','003.gif','004.gif'); </i>
</script>

代码描述:javascript图片预加载。javascript图片预加载简单介绍



123 164



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到