Question

I m quite sure this is an old problem.

This is how i render my animated gif:

 <img id= loading  alt= loading  style="display: none; position:  
    relative; left:10px; top:2px;" src="<%= Url.Image("loading.gif") %>" />

This is how I m desperately trying to show it at the moment:

showLoading: function(gifId, butId) {
        var n = gifId != undefined ? gifId :  loading ;
        var l = $( #  + n);

        //if browser is stupid
        if ( v  ==  v ) {
            var s = l.attr( src );
            var x = document.getElementById(n);
            x.style.visibility = "visible";
            x.style.display = "inline";
            setTimeout("document.getElementById( " + n + " ).src =  "+s+" ;",  
                        100);
        } else {
            l.show();
        }
        if (butId != undefined)
            $( #  + butId).css( cursor ,  default ).attr("disabled", true);
    },

Problem: Animated gif appears frozen, there is no animation

Strangest thing is that on other page everything works like a charm.

P.s. it s painful not to rant about IE... argh...

EDIT:

Wrapped around with span:

  <span id= loading  style= display: none;
                position: relative; left: 0px; top: 2px; >
                <img alt= loading  src="<%= Url.Image("loading.gif") %>" />
            </span>

changed js to:

 if ( v  ==  v ) {
            var f = function() {
                l.show();
                l.attr( src , l.attr( src ));
            };
            setTimeout(f, 100);
        } else {
            l.show();
        }

and mystically - it works now.

Answer 1

I ran into this once. If I tried to use JavaScript to show a little loading throbber as the browser moved to a page that was going to take a while to load, IE wouldn t animate the GIF. I solved it by putting the loading throbber directly into the HTML (not inserted via JavaScript) in a hidden div:

<div id="pseudo-progress-area" style="display: none;">
    <h3>Please wait while we process your PayPal transaction...</h3>
    <p style="text-align: center;">
        <img src="/Media/Template/Images/LoadingProgressBar.gif" alt="" />
    </p>
</div>

and then using JavaScript to toggle the visibility of the div after a short delay (this is using an older version of the Prototype library, but you get the idea):

<script type="text/javascript">    
    // We have to call this function via a setTimeout() or else IE7 won t
    // animate the GIF as the next page is loading.
    var fnHideConfirmation = function() {
        Element.hide(  confirmation-area  );
        Element.show(  pseudo-progress-area  );
    };    
</script>

That function is triggered in the form s submit button:

<input 
    type="submit"
    class="button"
    name="SubmitConfirmation"
    value="Buy Now →"
    onclick="setTimeout(fnHideConfirmation, 50);" />

So instead of delaying the src attribute change, leave it alone and just delay the call to your entire showLoading() function. Good luck!

Answer 2

Spin.js works for this use case.

Answer 3

I found accepted answer a bit complex to understand or implement however I had the same issue while doing this,

I had following HTML

<div id="progress_wheel_div" align="center" style="height:100%; display:none; vertical-align: middle;">
    <img src="images/progress_wheel.gif" style="margin-top: 204px;"/>
    <p class= arbitText  style="font-weight: bold;">Processing, Please wait!</p>
</div>

and in java script I was doing this

function onSubmit() {

   var divProgressWheel = document.getElementById("progress_wheel_div");
   divProgressWheel.style.display = "block";
}

But it was not animating gif file,

Solutions

Updated my java script and made it like following

function onSubmit() {    
   setTimeout(showProgress, 500);
}

function showProgress() {

    var divProgressWheel = document.getElementById("progress_wheel_div");

    divProgressWheel.innerHTML = "<img src= images/progress_wheel.gif  style= margin-top: 204px; /><p class= arbitText  style= font-weight: bold; >Processing, Please wait!</p>";
    divProgressWheel.style.display = "block";
}

please notice that divProgressWheel.innerHTML is same as what I had in html. There fore we can remove unnecessary html so modified html would be;

<div id="progress_wheel_div" align="center" style="height:100%; display:none; vertical-align: middle;">

    </div>

友情链接