您的位置：首页 > Web前端 > JavaScript

JavaScript预加载图片并显示loading的代码

2011-08-26 16:44 411 查看

http://www.webdm.cn/webcode/91282981-406a-442e-bd32-6d25cf8b2d0f.html

<html>

<head>

<title>JavaScript预加载图片并显示loading的代码 - www.webdm.cn</title>

<style type="text/css">

div{border:#aaaaaa 3px solid;width:200px;padding:2px;margin:2px 9px;font-size:12px;line-height:22px;color:#999999;}

.ipt1{width:160px;font-size:12px;color:#1F6478;border:#999999 1px solid;margin-left:9px;}

.ipt2{border:#999999 1px solid;margin-left:6px;color:#666666}

p{margin:0px;padding:0px;background-image:url(http://www.webdm.cn/images/loading.gif);background-position:center;background-repeat:no-repeat;width:200px;height:200px;text-align:center;font-size:12px;color:#999999;line-height:26px;}

</style>

<script language="javascript" type="text/javascript">

function preloadimg(url,obj,ipt){

var img=new Image();

obj.innerHTML="<p>图片加载中...</p>";

img.onload=function(){obj.innerHTML="";obj.style.width=String(img.width)+"px";ipt.style.width=String(img.width-40)+"px";obj.appendChild(img);};

img.onerror=function(){obj.innerHTML="图片加载失败！"};

img.src=url; //img.src一定要写在img.onload之后，否则在IE中会出现问题

}

function show(){

var div=document.getElementsByTagName("div")[0];

var input=document.getElementsByTagName("input");

preloadimg("http://www.webdm.cn/images/wall8.jpg",div,input[0]);

input[0].onclick=function(){this.value=""};

input[1].onclick=function(){preloadimg(input[0].value,div,input[0]);}

}

window.onload=show;

</script>

<title>JavaScript图片预加载代码，显示loading</title>

</head>

<body>

<div></div>

<br />

<input type="text" value="将图片地址粘贴在这里" class="ipt1"/><input type="button" value="开始加载" class="ipt2"/>

</body>

</html>

<br />

<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航