ASP.NET实现图片延迟加载

2011 年 6 月
一	二	三	四	五	六	日
	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

JavaScript图片预加载代码，完后载入显示loading
第一种是不错的方法噢：

一、

<html>
<head>
<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.codefans.net/jscss/demoimg/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(){
alert(ipt.name);
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.xd26.com/photo/up_files/2009-03-27/1238121079Qa5x.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>

二、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script>
var imgID = new Image();
imgID.src = "http://www.xd26.com/photo/up_files/2009-03-27/1238121079Qa5x.jpg";
imgID.onload = function(){
document.getElementById("jia").innerHTML = "<img src="+imgID.src+" >";
}
</script>
<div id="jia">Loading...</div>
</body>
</html>

链接

近期文章

热门标签

新人福利，免费薅羊毛

============ 欢迎各位老板打赏~ ===========

与本文相关的文章

发表评论