图片载入实时进度条+图片尺寸自适应

来源：互联网发布：软件测试全套视频教程编辑：程序博客网时间：2024/05/22 10:47

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Album</title>
  
  <style>

html {
margin:0px;
padding:0px;
height:100%;
overflow:auto;
}

body {
margin:0px;
padding:0px;
height:100%;
}

.loadingMask {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background-color:#909AE0;
filter:alpha(opacity=60);
opacity:0.6;
z-index:200;
}

.loadingBar {
width:400px;
height:6px;
border:1px solid black;
position:relative;
left:50%;
top:50%;
margin:-3px 0px 0px -200px;
overflow:hidden;
}

.loadingProcess {
width:10px;
height:4px;
background-color:green;
position:absolute;
left:1px;
top:1px;
overflow:hidden;
}

.loadingLabel {
width:400px;
height:40px;
line-height:28px;
font-size:12px;
font-family:arial 宋体;
letter-spacing:2px;
text-align:center;
position:absolute;
left:50%;
top:50%;
margin:0px 0px 0px -200px;
overflow:hidden;
z-index:205;
}

.loadingButton {
width:100px;
height:16px;
border-width:0px;
background-color:transparent;
color:blue;
line-height:16px;
font-size:11px;
font-family:"Time New Roman" 宋体;
letter-spacing:1px;
text-align:center;
text-decoration:underline;
position:absolute;
left:50%;
top:18px;
margin-left:-50px;
overflow:hidden;
cursor:pointer;
}

.imgDIV {
border:1px solid #666;
margin:4px;
width:102px;
height:82px;
float:left;
position:relative;
}

.albumImage {
position:absolute;
border-style:none;
filter:alpha(opacity=50);
opacity:0.5;
cursor:pointer;
}

  </style>

  <script>
/*
Author: Hutia
*/

// 定义常量
var intMaxWidth=100 /*最大宽度*/, intMaxHeight=80 /*最大高度*/, blnForceSize=true /*是否限制大小*/, blnAutoFit=true /*是否自动放大*/;

// 全局变量
var objLoadingMask, objLoadingBar, objLoadingProcess, objLoadingLabel, objLoadingButton;
var aryImgs=new Array();
var loadedImageCount=0;
var blnHideProcess=false;
var objBigImg;

function loadImg(src,containerID){ //这个函数必须在 container 载入之后使用
var container, imgDIV;
var objTemp=new Image();

objTemp.className="albumImage";
objTemp.style.display="none";

container=document.getElementById(containerID);
if(!container)container=document.body;
imgDIV=document.createElement("DIV");
imgDIV.className="imgDIV";
imgDIV.style.display="none";
container.appendChild(imgDIV);
imgDIV.appendChild(objTemp);

objTemp.onclick=img_onclick;
objTemp.onload=img_onload;
objTemp.onerror=img_onerror;
objTemp.onmouseover=img_onmouseover;
objTemp.onmouseout=img_onmouseout;
objTemp.index=aryImgs.length;
objTemp.containerID=containerID;
aryImgs[objTemp.index]=objTemp;
objTemp.src=src;
}

function img_onclick(){
objBigImg=new Image();
document.body.appendChild(objBigImg);
objBigImg.src=this.src;
objBigImg.originalWidth=this.originalWidth;
objBigImg.originalHeight=this.originalHeight;
objBigImg.style.position="absolute";
objBigImg.style.top=html_getRealTop(this)+"px";
objBigImg.style.left=html_getRealLeft(this)+"px";
objBigImg.style.width=this.offsetWidth+"px";
objBigImg.style.height=this.offsetHeight+"px";
objBigImg.style.zIndex=400;
objBigImg.tabIndex=0;
objBigImg.onblur=function(){
clearTimeout(this.timeHandle);
destory(this);
}
objBigImg.focus();

}

html_getRealLeft=function(o){ var l=o.offsetLeft; while(o=o.offsetParent){ l+=o.offsetLeft; } return(l); }

html_getRealTop=function(o){ var t=o.offsetTop; while(o=o.offsetParent){ t+=o.offsetTop; } return(t); }

function img_onmouseout(){
try{this.filters[0].enabled=true;}catch(e){}
try{this.style.opacity=0.5;}catch(e){}
}

function img_onmouseover(){
try{this.filters[0].enabled=false;}catch(e){}
try{this.style.opacity=1;}catch(e){}
}

function destory(obj){
obj.parentNode.removeChild(obj);
}

function setProcess(){
var loadingPercent;
if(blnHideProcess)return;
loadingPercent=loadedImageCount/aryImgs.length*100;
objLoadingLabel.firstChild.nodeValue="Please wait. Images Loading..."+loadingPercent.toFixed(1)+"% ("+loadedImageCount+"//"+aryImgs.length+")";
objLoadingProcess.style.width=parseInt(loadingPercent*(objLoadingBar.offsetWidth-4)/100)+"px";
if(loadingPercent==100)hideLoading();
}

function showLoading(){ //这个函数必须在有 body 之后使用
objLoadingMask=document.createElement("div");
objLoadingMask.className="loadingMask";
document.body.appendChild(objLoadingMask);

objLoadingBar=document.createElement("div");
objLoadingBar.className="loadingBar";
objLoadingMask.appendChild(objLoadingBar);

objLoadingProcess=document.createElement("div");
objLoadingProcess.className="loadingProcess";
objLoadingBar.appendChild(objLoadingProcess);

objLoadingLabel=document.createElement("div");
objLoadingLabel.className="loadingLabel";
objLoadingLabel.innerHTML="Please wait. Images Loading...";
document.body.appendChild(objLoadingLabel);

objLoadingButton=document.createElement("input");
objLoadingButton.className="loadingButton";
objLoadingButton.type="button";
objLoadingButton.value="Hide Process";
objLoadingButton.onclick=hideLoading;
objLoadingLabel.appendChild(objLoadingButton);

}
/*
Author: Hutia
*/
function hideLoading(){
blnHideProcess=true;
objLoadingLabel.firstChild.nodeValue="Process Ending...";
setTimeout(finishLoading,500);
}

function hideLoading_showAllImg(){
for(var i=0;i<aryImgs.length;i++){aryImgs[i].parentNode.style.display="";}
}

function finishLoading(){
destory(objLoadingMask);
destory(objLoadingLabel);
hideLoading_showAllImg();
}

  </script>
</head>

<body>
  <h1>This is the Demo.</h1>
  <div id="container1"></div>
  <script>showLoading();</script>
  <script>
baseURL="http:////hutia.monternet-idc.com//album//";
loadImg(baseURL+"001.jpg","container1");
loadImg(baseURL+"002.jpg","container1");
loadImg(baseURL+"003.jpg","container1");
loadImg(baseURL+"004.jpg","container1");
loadImg(baseURL+"005.jpg","container1");
loadImg(baseURL+"006.jpg","container1");
loadImg(baseURL+"006error.jpg","container1");
loadImg(baseURL+"007.jpg","container1");
loadImg(baseURL+"008.jpg","container1");
loadImg(baseURL+"009.jpg","container1");
loadImg(baseURL+"010.jpg","container1");
loadImg(baseURL+"011.jpg","container1");
loadImg(baseURL+"012.jpg","container1");
loadImg(baseURL+"013.jpg","container1");
loadImg(baseURL+"096error.jpg","container1");
loadImg(baseURL+"014.jpg","container1");
loadImg(baseURL+"015.jpg","container1");
loadImg(baseURL+"016.jpg","container1");
loadImg(baseURL+"017.jpg","container1");
loadImg(baseURL+"018.jpg","container1");
loadImg(baseURL+"a06error.jpg","container1");
  </script>
</body>

</html>