0

刚刚为客户完成一个项目，一旦回答将删除链接。

http://da.cronus.fweb.com.au/

在 iOS 和桌面上，动画/滚动非常流畅。一旦它击中 android，事情就会变得非常迟钝（在 nexus 7、Galaxy S4 和 Galaxy Tab 3 上测试）

我能做些什么来加快速度？

4

9 回答 9

1

首先，一些图像对于移动设备来说相当沉重

它不应该影响动画，但仍然......

在代码方面，唯一对我来说似乎很慢的部分是

$('.column p').each(function(){         
  if($(this).html().length < 1){ $(this).remove() }         
})

在 custom.js 第 665 行

所以我想如果动画很慢，那一定是设备/规格问题

但是那些可以帮助您的javascript的代码行可能会有所改变。

于 2013-09-24T20:38:13.707 回答
0

I tried it on my Galaxy Note II and it works quite smooth. If you are trying to improve it in anyway, i would recommend swipejs.com for mobile and flexslider for the desktop version (although flexslider is completely working on mobile too, i just found swipe.js to be easier to setup)

Good luck and have fun! :D

于 2013-09-24T18:34:35.763 回答
0

jQuery 本身在 Android 上是可以的。我用它所有的时间。这可能是一个编码不佳的滑块插件。但是，您有一些 2mb 左右的大图像，我认为这可以优化。我会先这样做。您还可以将 js 文件移动到底部并压缩和合并它们。这些都是需要先做的优化技术，不是浪费时间。我还会在图像上使用响应式 CSS 来显示不同尺寸的设备分辨率。Bootstrap 有一些图像大小的解决方案。在您的页面针对移动设备进行优化后，您可以重新评估滑块是否仍然很慢或者它只是大图像。

于 2013-09-24T08:58:15.407 回答
0

您提到了在 android 上的性能，但我第一次在 Firefox 上加载该网站时它也很慢。在查看您的幻灯片图像后，我发现幻灯片太大（~2mb），正如其他人提到的那样。除非您必须具有透明度，否则 PNG 不是最佳选择，因为它们一开始就比 JPEG 大。我会拍摄图像并使用 Ps 为网络优化它们。如果你真的想要超级高效，你可以拥有另一组用于 android 的较小图像。希望这可以帮助你。快乐编程！灰色的

于 2013-09-25T00:28:42.557 回答
0

从 java 脚本动画切换到 CSS3 动画 - 它们在大多数 Android 2.3+ 设备上都是硬件加速的。

于 2013-09-24T05:46:27.470 回答
0

对于滑动，您可以使用 Flexslider 插件。插件支持触摸，它是响应式的。我认为只有滑动插件有一些问题。

于 2013-09-21T06:19:59.233 回答
0

如果我是你，我会使用 css 过渡。我发现它们在移动设备上工作得更好，尤其是 Android。我意识到在桌面环境中使用 javascript 转换可以获得更广泛的支持，但移动设备则是另一回事。

你可以杂交....

http://jsfiddle.net/PHPVT/

$("#target").on("click", function () {
    $(this).addClass("clicked");
})

使用 javascript 事件来触发 css 转换 :)

当我必须为 ie8 构建时，我一直使用它，因为它不会触发 :hover 状态，而不是锚标签。

于 2013-09-25T00:58:00.457 回答
0

您的问题非常笼统。所以我想说，您需要在滚动（如果对滚动数据进行一些处理）或动画或任何其他活动中尽可能减少后台处理。

由于移动设备的资源较少。

于 2013-09-24T18:42:13.933 回答
0

android 上的动画性能不是你可以用一个 IE jQuery 插件“让它在 IE8 中运行”并期望它在 android 上运行类似的东西。

请记住，Android 可以在各种各样的设备上运行，所有设备都有自己的性能问题，有些设备的 android webkit 版本甚至比其他设备更糟糕。预计上一代四核平板电脑/手机与低预算设备之间存在巨大差异。

我的建议：

  • 尝试一个 jquery 插件，它自动使用 css3 动画而不是 jquery 在可用的地方循环（但不能保证）
  • 尝试使用 requestAnimationFrame ( http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/ )优化 jquery 动画的 jquery 插件
  • 正如其他人所提到的：您不能只将 2mb 的图像扔到手机上并期望它们能够流畅地制作动画。为您提供服务的设备优化资产（例如，手机的最大图片为 800x600）
  • 如果一切都失败了：手动优化，通过启用 android 浏览器调试设置并将 -webkit-transform 3d-transitions 添加到需要动画的元素，以便 GPU 渲染图层。
于 2013-09-24T21:27:17.403 回答