网页图片加载，加载效果
网页图片加载，加载效果实现
工具/原料
已安装Dreamweaver或其它网页编辑器的电脑一台
浏览效果
加载中
加载完成
加载提示信息消失
HTML代码
在body标签写HTML代码，图片src路径上百度图片复制一个图片路径就行了，注意：要用网页上的图片路径，不然效果可能实现不了，或者一闪而过。
CSS样式代码
写入CSS样式代码
JS脚本代码
写入JavaScript脚本代码
完整代码(非图片可复制)
HTML代码：
<div id="box">
<img src="http://g.hiphotos.baidu.com/image/pic/item/f31fbe096b63f624359eeb1b8544ebf81b4ca3e3.jpg
<span>图片正在加载...</span>
</div>
CSS代码：
#box { width:620px; height:700px; margin:0 auto; position:relative; z-index:1; border:10px #F09 double; }
#box span { width:200px; height:200px; border:1px solid #CC3; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; position:absolute; z-index:2; top:50%; left:50%; margin-top:-100px; margin-left:-100px; background:#9C0; color:red; text-align:center; font-size:24px; line-height:200px; font-weight:bold;}
JavaScript代码：
window.onload=function (){
var oBox=document.getElementById('box'); var oSpan=document.getElementsByTagName('span')[0]; var oImg=document.getElementsByTagName('img')[0]; function txtOK(){ oSpan.innerHTML='加载完成！'; oSpan.style.color='green'; oSpan.style.background='#CCC'; oSpan.style.opacity='0.8'; setTimeout(function (){ oSpan.style.opacity='0.3'; oSpan.style.display='none'; },1000); } var src = oImg.getAttribute('src'); oImg.setAttribute('src',''); oImg.onload=function (){ txtOK(); };
}；
注意事项
主要用图片onload属性，很简单吧。