Javascript教程_JS+AS实现真正页面加载图片进度条(带百分比)_Javascript教程(2)_H5之家

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>加载图片进度条</title>
<script language="javascript" type="text/javascript" src="js/flashobject.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="JavaScript">
//定义LOAD样式 loadBg为背景DIV loading为加载条DIV loadText为百分比DIV
var loadStr="<div><div></div></div><div></div>";
$(document).ready(function(){
    loadSwf(1,1);//加在SWF触发器
    //绑定加载按钮
    $("#loadBtn_1").click(function(){
        $("#urlText_1").val()!=""?loadImg($("#urlText_1").val(),"picDiv_1"):alert("路径不能为空");
    })
    $("#loadBtn_2").click(function(){
        $("#urlText_2").val()!=""?loadImg($("#urlText_2").val(),"picDiv_2"):alert("路径不能为空");
    })
})
//加载图片事件
//参数说明:url-图片路径,picDiv-装载图片的DIV的ID
//用法--------loadImg('http://www.aaa.com/pic.jpg','picDiv')
function loadImg(url,picDiv){
$("#"+picDiv).html(loadStr);
    if (navigator.appName.indexOf("Microsoft") != -1) {
      window["swfId"].forjs(url,picDiv);
}
else {
      document["swfId"].forjs(url,picDiv);
}
}
//加载SWF事件
function loadSwf(rootWidth,rootHeight){
    var fo = new FlashObject("loadSwf.swf", "swfId", rootWidth, rootHeight, "8", "");
    fo.addParam("quality", "high");
    fo.addParam("salign", "t");
    fo.addParam("scale", "noscale");
    fo.addParam("loop", "false");
    fo.write("flashcontent");
}
//进度条实时控制函数事件
function loadElement(picDiv,n){
    $("#"+picDiv+" #loading").width(n+"%");
    $("#"+picDiv+" #loadTxt").html(n+"%");
}
//加载完毕后回调函数----回调参数说明:url-传回图片地址值,picDiv-传回所加载图片DIV的ID,w-传回的图片原始宽度,h-传回的图片原始高度
function picCallBack(url,picDiv,w,h){
    $("#"+picDiv).html("　　图片高宽象素为:"+w+"*"+h+"<img src='"+url+"' alt=''/>").hide().fadeIn(1000);
}
</script>
</head>
<body style="background-color: #ffffff;font-size:12px;">
<div id="flashcontent"></div>
<div>
    图片路径1:<input type="text" style="width:400px;" id="urlText_1"/>
    <input type="button" value="加载图片" id="loadBtn_1"/>
</div>
<div id="picDiv_1"></div>
<div>
    图片路径2:<input type="text" style="width:400px;" id="urlText_2"/>
    <input type="button" value="加载图片" id="loadBtn_2"/>
</div>
<div id="picDiv_2"></div>
</body>
</html>