【问题标题】:jQuery animation is slower and lags in chrome on server sidejQuery 动画速度较慢,并且在服务器端的 chrome 中滞后
【发布时间】:2012-05-07 12:38:09
【问题描述】:

我的chrome版本是:18.0.1025.168 m,jQuery版本是1.7.2。

当我尝试制作动画时:

$("#xyz").animate({ 'margin-left':'500px' }, 500, function(){
    //Do something (another animation).
    $("#abc").animate({ 'margin-left':'300px' }, 500);
});

xyzabc 在客户端(在我的计算机上)的所有浏览器(IE、FF 和 Chrome)中都流畅而快速地制作动画。

但是,当我将它上传到服务器时,IE 和 FF 像往常一样流畅地制作动画。 Chrome 平滑地为abc 制作动画。但是 Chrome 在为 xyz 制作动画时会严重挣扎/滞后。

【问题讨论】:

  • abcxyz是什么元素?你能提供一个演示页面吗?
  • abc 和 xyz 是 div...它们只是 2 个 div 元素,如下所示:

标签: jquery performance google-chrome animation


【解决方案1】:

您在 xyz 上的动画是否重复出现?如果是这样,您可能需要清除动画队列。查看 jquery .stop() 命令。您滞后的原因可能是 jQuery 在开始下一个动画之前等待之前的动画完成。如果每次为 xyz 设置动画时延迟似乎都会增加,我会怀疑这是原因。

【讨论】:

  • 没有。 xyz 和 abc 上的动画仅在页面加载时发生且仅发生一次。此外,我已经提到它们在 Firefox 和 Internet Explorer 6+ 上运行得非常好。 Chrome 是唯一的问题,并且该问题仅发生在服务器端。脚本的离线版本不会在任何浏览器上造成任何问题。
  • 当您说问题只发生在服务器端时,您究竟是什么意思?
  • aamiri,我的意思是当我将网站的内容上传到网络托管服务提供商提供的磁盘空间时。好的... 987654321@s 似乎与我在 Windows 中的 chrome 不符。无论如何,非常感谢您的帮助,伙计们!
【解决方案2】:

将数字提高到高值并尝试。即代替 margin-left':'500px' 尝试 margin-left':'1000px' ...我不知道为什么,但它对我有用... margin 和 top,left,right,bottom 在 chrome 中有点滞后。

【讨论】:

    【解决方案3】:

    这是 Chrome 中的一个众所周知的错误。当背景图像是全尺寸甚至低于它时,它会滞后。

    阅读更多内容https://code.google.com/p/chromium/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=&id=92812 “在 chrome 中滚动时背景图像滞后是一个错误!”

    【讨论】:

      猜你喜欢
      • 2013-05-06
      • 1970-01-01
      • 1970-01-01
      • 2021-09-23
      • 2022-01-16
      • 1970-01-01
      • 2020-12-25
      • 2012-02-25
      • 1970-01-01
      相关资源
      最近更新 更多