假性进度效果

var image1=new Image();

var loadi=0

var loadtime=null;

function pageload(){
loadi++;
if(loadi==1){
var canvas = document.getElementById("adCanvas");

image1=image;

if(image1.width > 200) {
// 宽度等比例缩放 *=
image1.height =image1.height*200 / image1.width;
image1.width = 200;
}

$("#fgbox").css("width",image1.width);
$("#fgbox").css("height",image1.height);

var ctx = canvas.getContext("2d");
// canvas清屏
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 重置canvas宽高
canvas.width = image1.width;
canvas.height = image1.height;
// 将图像绘制到canvas上
ctx.drawImage(image1, 0, 0, image1.width, image1.height);

$("#adcbox").css("display","block");
loadtime=setTimeout('pageload()',100);
}
if(loadi<20){
var h = image1.height*(100-loadi)/100;
$("#fgbox").css("height",h);
loadtime=setTimeout('pageload()',600);
$("#loadnum").html(loadi+'%');
}else if(loadi<50){
var h = image1.height*(100-loadi)/100;
$("#fgbox").css("height",h);
loadtime=setTimeout('pageload()',400);
$("#loadnum").html(loadi+'%');
}else if(loadi<90){
var h = image1.height*(100-loadi)/100;
loadtime=$("#fgbox").css("height",h);
setTimeout('pageload()',500);
$("#loadnum").html(loadi+'%');
}else if(loadi<100){
var h = image1.height*(100-loadi)/100;
loadtime=$("#fgbox").css("height",h);
setTimeout('pageload()',900);
$("#loadnum").html(loadi+'%');
}
}

html部分：