<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.οnlοad=function(){obj.innerHTML="";obj.style.width=String(img.width)+"px";ipt.style.width=String(img.width-40)+"px";obj.appendChild(img);};
img.οnerrοr=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.codefans.net/jscss/demoimg/wall8.jpg",div,input[0]);
input[0].οnclick=function(){this.value=""};
input[1].οnclick=function(){preloadimg(input[0].value,div,input[0]);}
}
window.οnlοad=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>
與加載頁面
;background-position:center;background-repeat:no-repeat;width:200px;height:200px;text-align:center;font-size:12px;color:#999999;line-height:26px){kind=link}
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
由淺入深在實踐中玩轉Zabbix，解決剩下20%的監控需求！
本文整理自Zabbix中級認證專家李銘栓（滿分學員）在Zabbix Meetup廣州站的演講。 掌握這幾種監控方式解決80%的監控問題，剩下的20%如何實現？這裏有答案！ 幾點經驗分享： 1