javascript - GIF Image Stops when "document.location.href" - Stack Overflow

admin管理员组

文章数量:1345017

I have this function in javascript :

function loadPage (url){
  showLoadPageGif();         // visibility On
  document.location.href = getPath + "/" + url ;  
}

When I use this function , GIF image is displayed in the screen but not working . someone has fought before, with this problem ? thnx

I have this function in javascript :

function loadPage (url){
  showLoadPageGif();         // visibility On
  document.location.href = getPath + "/" + url ;  
}

When I use this function , GIF image is displayed in the screen but not working . someone has fought before, with this problem ? thnx

• javascript
• gif

Share Improve this question Follow asked Feb 8, 2013 at 12:51 Uri IkartUri Ikart 9211 silver badge99 bronze badges 2

• 1 You do know you're redirecting, right? – gdoron Commented Feb 8, 2013 at 12:53
• Yes i'm redirecting right. – Uri Ikart Commented Feb 8, 2013 at 13:17

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

i recently ran into this issue using animated SVGs as background-images in pseudo elements. I purposefully put in a large delay on my webserver so i could stay on the current page after window.location = url; It was weird that all other CSS animations and hovers still worked, but the SVG cog just stuck.

After some playing around i found that the animations continued to run if, instead of changing window.location, i submitted a GET form.

var url;
//load & setup loading animation
//then generate and submit form with a slight delay
setTimeout(function(){
  var new_form;
  new_form = document.createElement('form');
  new_form.method = 'GET';
  new_form.action = url;
  document.body.appendChild(new_form);
  new_form.submit();
}, 100)

tested on safari 5.1, firefox 24, chrome 32

I assume you mean "GIF animation stops".

This is the correct behavior. Since you go to a new page, all resources for the old page are freed. This of course includes the GIF itself.

You don't "see" this happening because the browser doesn't waste any time rendering a blank page when you assign location.href.

What you need to do is use an AJAX to request the new page and then replace the whole DOM with the new one in the success handler.

There is a bug in IE6 which stops the animations when you start an AJAX request; to fix that, just assign the src attribute of the image again (i.e. img.src = img.src;) to restart them.

Which browser you're using ? I needed to do the same one time if you're using IE just do this :

var loadingFigure = $('#myImage');
var html = loadingFigure.html();            
window.location.href = 'myImage';
loadingFigure.html(html);

For firefox is more plicated you need to use an iframe and do something like this :

<iframe id="myIframe" src="/images/busy.gif" scrolling="no" frameborder="0"></iframe>

$('#myIframe').attr('src', '/images/busy.gif');
window.location.href = 'mylocation'       
$('#myIframe').attr('src', '/images/busy.gif'); 

本文标签： javascriptGIF Image Stops when quotdocumentlocationhrefquotStack Overflow