hidden animated GIF images stop play in IE browser when submit form

I had met such a problem:

There is a form,a payment form to collect credit card info,below is the html code of the page.

Source code    
<form id="form1" action="PayPage.aspx" method="post">
    <input type="text" name="txtPost" value=""></td>
    <input type="text" name="txtEmail" value=""></td>
    <input type="submit" id="btnPay" onclick="return VerifyPage();" value="Submit" name="btnPay">
</form>

When click on the button to submit the form, we need to show a loading gif image to customer.  That means we are processing their request.Here is the js code below:

Source code    
function VerifyPage() {
    //do some validate
	//if all passed,show alert message box and the animated loading gif image
    sAlert("Connecting to bank......Please wait......<br/><img id='img123' alt='loading......' src='../resources/images/jindutiao.gif' />");
    return true;
}
 
function sAlert(str) {
    var msgw,msgh,bordercolor;
    msgw=400;
    msgh=100;
    titleheight=25;
    bordercolor= "#336699 ";
    titlecolor= "#99CCFF ";
    var sWidth,sHeight;
    sWidth=document.body.offsetWidth;
    sHeight=screen.height;
    var bgObj=document.createElement("div");
    bgObj.setAttribute('id','bgDiv');
    bgObj.style.position = "absolute";
    bgObj.style.display = "none";
    bgObj.style.top= "0";
    bgObj.style.background= "#777 ";
    bgObj.style.filter= "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75 ";
    bgObj.style.opacity= "0.6";
    bgObj.style.left= "0";
    bgObj.style.width=sWidth   +   "px";
    bgObj.style.height=sHeight   +   "px";
    bgObj.style.zIndex   =   "10000";
    document.body.appendChild(bgObj);
    var msgObj=document.createElement("div");
    msgObj.setAttribute("id", "msgDiv");
    msgObj.setAttribute("align", "center");
    msgObj.style.background= "white ";
    msgObj.style.border= "1px solid "   ;
    msgObj.style.position   =   "absolute";
    msgObj.style.left = "50%";
    msgObj.style.display = 'none';
    msgObj.style.top   =   "50%";
    msgObj.style.font= "14px/1.6em   Verdana,   Geneva,   Arial,   Helvetica,   sans-serif";
    msgObj.style.marginLeft   =   "-225px"   ;
    msgObj.style.marginTop   =   -75+document.documentElement.scrollTop+ "px";
    msgObj.style.width   =   msgw   +   "px";
    msgObj.style.height   =msgh   +   "px";
    msgObj.style.textAlign   =   "center";
    msgObj.style.lineHeight   = "60px";
    msgObj.style.zIndex   =   "10001";
    document.body.appendChild(msgObj);
    var txt=document.createElement("p");
    txt.style.margin= "1em   0"
    txt.setAttribute("id", "msgTxt");
    txt.innerHTML=str;
    document.getElementById("msgDiv").appendChild(txt);
}

This works fine in all major browsers except IE.When the user click the submit button, the message dialog show,but the animated loading image is frozen.This is another know bug in IE browsers.IE didn’t play any hidden animated image after submit event.

To get around this bug,you need to let IE browser to reaload the image in a timeout. That means you need to change the image elements src attribute every moments.

Source code    
function sAlert(str) {
    var msgw,msgh,bordercolor;
    msgw=400;
    msgh=100;
    titleheight=25;
    bordercolor= "#336699 ";
    titlecolor= "#99CCFF ";
    var sWidth,sHeight;
    sWidth=document.body.offsetWidth;
    sHeight=screen.height;
    var bgObj=document.createElement("div");
    bgObj.setAttribute('id','bgDiv');
    bgObj.style.position = "absolute";
    bgObj.style.display = "none";
    bgObj.style.top= "0";
    bgObj.style.background= "#777 ";
    bgObj.style.filter= "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75 ";
    bgObj.style.opacity= "0.6";
    bgObj.style.left= "0";
    bgObj.style.width=sWidth   +   "px";
    bgObj.style.height=sHeight   +   "px";
    bgObj.style.zIndex   =   "10000";
    document.body.appendChild(bgObj);
    var msgObj=document.createElement("div");
    msgObj.setAttribute("id", "msgDiv");
    msgObj.setAttribute("align", "center");
    msgObj.style.background= "white ";
    msgObj.style.border= "1px solid "   ;
    msgObj.style.position   =   "absolute";
    msgObj.style.left = "50%";
    msgObj.style.display = 'none';
    msgObj.style.top   =   "50%";
    msgObj.style.font= "14px/1.6em   Verdana,   Geneva,   Arial,   Helvetica,   sans-serif";
    msgObj.style.marginLeft   =   "-225px"   ;
    msgObj.style.marginTop   =   -75+document.documentElement.scrollTop+ "px";
    msgObj.style.width   =   msgw   +   "px";
    msgObj.style.height   =msgh   +   "px";
    msgObj.style.textAlign   =   "center";
    msgObj.style.lineHeight   = "60px";
    msgObj.style.zIndex   =   "10001";
    document.body.appendChild(msgObj);
    var txt=document.createElement("p");
    txt.style.margin= "1em   0"
    txt.setAttribute("id", "msgTxt");
    txt.innerHTML=str;
    document.getElementById("msgDiv").appendChild(txt);
 
    //added the following code to walk around IE BUG
    var imgurl = document.getElementById('img123').src;
    setTimeout(function() {
        document.getElementById('img123').src = imgurl;
    },200);
 
}

Leave a Reply

Your email address will not be published. Required fields are marked *

*


4 + = nine

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>