Question

我在javascript中有这个功能：

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

使用此功能时，屏幕上会显示GIF图像但不起作用。有人曾经打过这个问题吗？日Thnx

Answer 1

我最近使用动画SVG作为伪元素中的背景图像遇到了这个问题。我有目的地在我的网络服务器上放了很大的延迟，所以我可以在window.location = url;之后留在当前页面。奇怪的是所有其他CSS动画和悬停仍然有效，但SVG齿轮卡住了。

经过一些游戏，我发现动画继续运行，如果我提交了一份GET表格，而不是改变window.location。

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)

在safari 5.1，firefox 24，chrome 32

上测试

Answer 2

我认为你的意思是“GIF 动画停止”。

这是正确的行为。由于您转到新页面，因此将释放旧页面的所有资源。这当然包括GIF本身。

您没有“看到”这种情况，因为当您分配location.href时，浏览器不会浪费任何时候呈现空白页。

您需要做的是使用AJAX请求新页面，然后用成功处理程序中的新DOM替换整个DOM。

IE6中存在一个错误，当您启动AJAX请求时会停止动画。要解决此问题，只需再次指定图像的src属性（即img.src = img.src;）即可重新启动它们。

Answer 3

您使用的是哪种浏览器？如果您使用IE，我需要做同样的事情：

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

对于firefox更复杂，你需要使用iframe并执行以下操作：

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

GIF图像在“document.location.href”时停止

3 个答案: