jQuery $.post 停止 GIF 动画？答案

【问题标题】：jQuery $.post stop GIF animation?jQuery $.post 停止 GIF 动画？
【发布时间】：2014-04-23 15:12:27
【问题描述】：

我发送请求以获取 Html 内容并替换为其他内容。

这是我的 jQuery 代码。

 $.post(page,function(data){
      $('.page_content').html(data);
 });

我也使用此代码发送请求，但没有工作我遇到了同样的问题。

$.ajax({
    url:page,
    method:'POST',
    async:true,
    success: function(data){
        $('.page_content').html(data);
    }
});

我使用 $.ajaxStart 和 $.ajaxStop 来隐藏和显示 GIF 加载。

 $(document).ready(function(){
      $( document ).ajaxStart(function() {
             $( ".page_loading" ).show();
      });
      $( document ).ajaxStop(function() {
             $( ".page_loading" ).hide();
      });
 });

此代码在 Mozila 中运行良好，但此代码不适用于 chrome 或 safari。

在 chrome 或 safari 中，GIF 加载是停止动画。

我使用此 GIF 进行加载。

http://4.bp.blogspot.com/-j9gMlFkdLvw/Tp1ZdBf0L5I/AAAAAAAAA6c/igXiNrSqqgA/s400/loading-gif.gif

请检查这在 Mozila 中是否有效，但 chrome 和 safari 没有动画是停止动画。

谢谢。

【问题讨论】：

标签： javascript jquery gif animated-gif

【解决方案1】：

我还没有在任何地方找到它的文档，但我的经验是当 webkit 开始页面转换时，它会通过停止 GIF 动画并防止某些页面重绘来开始从当前页面回收内存。大概这是为了在渲染下一页时减少整体内存使用量。我发现您可以使用更小（文件大小）的 GIF 来解决这个问题。

【讨论】：

我尝试使用小尺寸的 GIF，但我遇到了同样的问题。 GIF 停止动画。

【解决方案2】：

首先，尽量不要直接链接到 blogspot 中的那个 url。将图像托管在同一台服务器上，因此它可以快速加载，并且 blogspot url 可能稍后会更改，甚至可能不会为其他人加载。

其次，我认为 GIF 停止是因为在您的文档准备好时您立即运行 ajax，为什么不使用 SetTimeout() 来延迟它一点。

另外，您的 HTML 响应 ($('.page_content').html(data);) 可能有太多 html，所以它使浏览器忙碌并且暂时不播放 GIF 或看起来像“挂起”

【讨论】：