GIF Image Stops when “[removed].href”

问题:

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

回答1:

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

回答2:

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.

回答3:

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 complicated 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');