17

我一直在研究一个使用 CSS3 过渡的幻灯片脚本，或者当它们不可用时使用 jQuery 的动画。我创建了一个自定义函数来执行幻灯片动画，这很合适。一切似乎都运行良好，但我在测试过程中遇到了一个重大障碍。

由于某种原因，在大型幻灯片的过渡前后应用 jQuery CSS 会有很大的延迟。例如，下面链接中的幻灯片大约有 9900 像素宽（容器宽度，其中大部分是隐藏的）。使用 CSS3 过渡和变换属性操纵容器以显示适当的幻灯片。在下面粘贴的第 75 - 82 行之间应用 CSS 会出现延迟。特别是，应用“过渡”CSS 会导致问题。将“过渡”CSS 添加到样式表（而不是使用 JS 应用它），延迟就会消失。然而，这并不是一个真正的解决方案，因为我们只想在特定属性上使用 CSS3 转换，这可能会有所不同（在样式表中使用“全部”会转换一些我们不想动画但定期更改的 CSS）。

动画功能： http: //pastebin.com/9wumQvrP

幻灯片演示： http ://www.matthewruddy.com/demo/?p=2431

真正的问题在于 iOS，其中幻灯片（有时甚至是浏览器）变得完全无法使用。我无法查明任何错误，并且真的用尽了我调试 JS 的知识。在玩了一会儿之后，我确信它与这部分功能有关，并且在插件中完全禁用 CSS3 支持可以完全消除问题。

我完全陷入困境，非常感谢任何人可以提供的任何帮助。

- - 编辑 - -

我尝试使用原生 Javascript 而不是 jQuery 的 .css 函数来应用 CSS。结果相同，没有更好的性能。另外值得注意的是，这在 Firefox 中根本没有发生，而且似乎只是 Webkit 浏览器的问题。

任何有解决方案的人都乐意为几瓶啤酒捐款！我真的想不通这个！

--- 第二次编辑 ---

好的，所以一直在调试，我可以看到速度变慢是由浏览器重绘周期导致的，该周期需要很长时间。有没有更好的方法来处理它已经在做的事情？绝对定位元素是减少重绘的一种已知方法，但这并不真正有效，因为幻灯片是响应式的。绝对定位幻灯片图像或幻灯片本身会导致其折叠。

--- 第三次编辑 ---

一天后，我取得了一些进展。在元素样式表中添加“transition: all 0s ease” CSS 已经摆脱了通过原帖中提到的自定义动画功能添加内联 CSS 过渡属性引起的重绘。这会带来显着的性能提升，尤其是在转换本身完成后移除内联 CSS 转换属性时。

好东西！但是，现在在转换后移除内联 CSS 转换（用于创建硬件加速转换效果本身）并应用左侧定位时，仍然会出现减速。当两者同时发生时，就会出现减速。

将它们分成两个单独的任务（删除翻译，然后在未指定时间的 setTimeout 中添加左侧位置），再次摆脱重绘 = 性能增益，看起来问题已解决。但有时，CSS 过渡属性没有足够快地被否定，并且翻译删除被动画化。不好，不知道在哪里可以解决它。

4

6 回答 6

1

我认为问题是您正在加载巨大的图像:)

它们对于您拥有它们的容器来说太大了，因此您将它们缩小，这更加耗费资源。

尝试调整它们的大小。

于 2012-09-14T14:24:38.037 回答
1

首先恭喜您的调试！我最近一直在研究完全相同的东西，发现 ios 设备不支持在同一页面中放置大量图像。它会导致崩溃，我发现的唯一解决方案是删除元素，而不仅仅是隐藏它们。缺点是移除和添加元素会导致延迟，所以当你完成转换时，你必须巧妙地做到这一点。我认为最好的方法是在 DOM 中保留 3 或 5 个图像，然后用图像的缩略图替换其余的图像，调整大小以适合原始图像。转换完成后，我只需将大图像放回原位...希望这至少可以帮助您解决 ios 问题...

于 2012-09-16T15:40:52.077 回答
1

在用 Chrome Dev Tools 分析了你的代码 TimeLine 之后，我相信你可以做一些优化。

据我所知，每次请求动画时，您的 16 张图像中的每一张都会被完全重新绘制。这对我来说似乎很明显，因为您的示例中有 16 张图像，并且 Chrome 开发工具每次点击“下一步”都会报告 16 次长“绘制”执行。

在我看来，你应该想出一个只考虑翻译两个图像的解决方案：一个你想要隐藏的图像和一个你想要显示的图像。因此，请考虑不要移动其余图像，而是将它们并排放置到显示的图像中。

还有一件事，使用按比例缩小的图像可能会使绘制周期更长。尽可能避免它们。

于 2012-09-17T09:28:46.640 回答
1

好吧，我想我已经设法弄清楚了！如您所知，原始帖子链接并未反映我在本地主机环境中所做的更改。

绝对定位幻灯片容器解决了在过渡发生后重绘速度出现的问题（同时应用 CSS 属性）。显然，将它们从 DOM 中取出就可以了，让绘制更有效地进行。

我最初并没有尝试太多，因为我知道这会给调整大小功能增加很多工作。我原本打算在 JS 中根本不调整大小，而是依靠百分比来做这些脏活。绝对定位容器会导致幻灯片视口折叠，从而使本机调整大小变得无用。

但是，无论如何，我已经在其他浏览器中遇到了亚像素渲染的问题，所以我想是时候硬着头皮依靠固定的像素值了。然后我使用 JS 来处理调整大小，使用窗口调整大小事件。一切似乎都很好，但是由于定位，幻灯片仍然折叠。分配高度值不能正常工作，所以有点茫然。

幸运的是，我遇到了一个巧妙的小技巧，将幻灯片视口的“顶部填充”设置为动态计算的百分比值（所需的幻灯片高度，在此脚本的设置面板中设置，除以所需的宽度）。由于 padding-top 百分比是相对于元素的宽度，这在提供响应高度和再次校正视口（不再看起来折叠）方面做得很好。

这是一些关于使用 padding-top 来保持纵横比的响应元素的信息。很棒的小技巧： http: //f6design.com/projects/responsive-aspect-ratio/

现在一切都很好，并且在 iOS 和 webkit 浏览器中运行良好。一切都非常快，并且可以正常工作。四天后，终于弄明白了。不得不求助于 JS 来调整大小并不高兴，但我想由于浏览器之间的百分比不一致，它总是会发生。很多小数=不好！

感谢所有试图为我指明正确方向的人。绝对让我思考，并学到了很多调试技巧，我可以再次使用这些技巧来确保转换性能良好。再次感谢！

于 2012-09-17T22:27:20.107 回答
0

不确定这是否有帮助，但我注意到你使用 3d 翻译 - 我认为一个简单的 2d 翻译就足够了，特别是因为你的第三个参数是 0 并且可能会加速问题，也像 Armel L. 建议的那样使用更少的图像，不要'虽然没有要测试的 iphone... 或者，这是我在 css3 之前使用的解决方案，但仍然可以通过修改 left (? 和 top - 演示只向左和向右移动来移动包含图像的元素？没有过渡效果），通过这种方式你可以微调刷新率，我认为这可能会导致速度下降......你可以在没有人注意到的情况下低至 18 fps，甚至可能只需要 16 fps 就足够了

于 2012-09-16T23:00:00.907 回答
0

当我第一次设计杂志轮播式页面设备时，我就有了这个。

If you have a series of images within a long "tray", even if they are not within the viewport, they will still take up ram, and you can effectively have five or so before leaks and nastiness begin to happen.

What I found works is "hiding" them ... But make sure they take up the physical space necessary.

What I also found worked was that one could make the 'previous' current and 'next' image are visible and move the tray, 'unhiding' them as they reach those three positions.

In my own system, I skipped the 'tray' holding e images and only had them at -100% width, 100% width and the current one a 0.

I never had much luck with the typical long-tray carousel with large scale background images... Especially with css3 acceleration.

于 2013-03-08T04:12:57.893 回答