注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

朱文龙(Z.Mofei)的blog

当你能飞的时候就不要放弃飞翔。

 
 
 

日志

 
 

预加载和javascript Image()对象  

2011-09-08 18:27:49|  分类: 【前端】JS&交互 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
首先是Image()对象的使用,直接贴代码

<html>
<head>
<script language = "JavaScript">
function preloader()
{
heavyImage = new Image();
heavyImage.src = "heavyimagefile.jpg";
}
</script>
</head>
<body onLoad="javascript:preloader()">
<a href="#" onMouseOver="javascript:document.img01.src='heavyimagefile.jpg'">
<img name="img01" src="justanotherfile.jpg"></a>
</body>
</html>
以下代码预先加载了heavyimgefile.jpg,当在onMouseOver的时候就不会出现等待的情况。
如果想一次预加载很多张图片可以用以下的代码

<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>

然后是很实用的,经常会遇到在图片加载完成之前提示图片加载中,然后图片加载好了再显示图片,这里给出demo
<html>
<head>
<script language="JavaScript">

// create an image object
objImage = new Image();
    
// set what happens once the image has loaded objImage.onLoad=imagesLoaded();
    
// preload the image file
objImage.src='images/image1n.gif';

// function invoked on image load
function imagesLoaded()
{   
     document.location.href='index2.html';
}

</script>
</head>

<body>

Please wait, loading images...

</body>
</html>
应该很好理解的,上面的例子,先创建Image()对象,然后预加载,通过objImage.onload这个来实现图片加载完成之后执行某些方法之类的。

贴出英文原文的出处,有兴趣的话可以自己过去看看,写的很不错
http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317

  评论这张
 
阅读(544)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017