Performance iPad web应用程序上的全屏图像渲染

我正在iPad web应用程序上显示一个包含多个全尺寸768x1024图像的视图。图像位于相邻浮动的单独div中。这些图像是预加载的

图像之间的转换使用-webkit transform:translate3d完成，这应该是考虑性能时最有效的方法。对全身元素进行转换。但我不能说渲染是通过复制滚动、平铺滚动还是完全重画来执行的

然而，当我在图像之间滑动时，新图像的渲染没有完全工作-图像的右侧最后约20%闪烁。只有在第一次显示图像时才会发生这种情况，之后就没有问题了

我已经尝试过的：

全尺寸图像和低分辨率图像均为背景图像，分别为200kb和30kb 如上所述，但作为img元素 smalle缩略图图像以全尺寸显示，背景尺寸：覆盖非常差的性能 单色图像。 通过在单个视图中缩小整个内容的比例，然后将其重新缩放为100%，一次显示整个内容 这些都不管用。我还尝试通过脱机应用程序缓存提供图像，但我不认为这个问题在从何处加载图像方面有多大作用，而只是作为一个渲染问题

我还检查了是否有可能影响性能的CSS属性，例如过滤器、定位或溢出问题。不应该有任何会导致处罚的事情

---

目前，唯一可行的解决方案是根本没有图像，因为没有图像就没有渲染问题。以及转换完成后的显示图像。但是，这只是第二个也是最后一个解决方案。

您可能需要将-webkit transform:translate3d0,0添加到图像本身。

您可能需要将-webkit transform:translate3d0,0,0添加到图像本身。

谢谢，Parker。我有一个非常类似的设置，在大约20%的图像中有精确的闪烁问题，这解决了它。该网站上有人建议将图像包装成div，但就我所知，这并没有什么区别，可能是因为图像浮动时，它们会自动变成块元素。

谢谢，Parker。我有一个非常类似的设置，在大约20%的图像中有精确的闪烁问题，这解决了它。该网站上有人建议将图像包装成div，但就我所见，这并没有什么区别，可能是因为当图像浮动时，它们会自动变成块元素。

本质上，这是强制iPad缓存资源，而不是动态渲染，这会导致闪烁。这也会导致应用程序使用更多内存，所以在使用时要小心。因此，这可以解释图像仅在第一次渲染时闪烁的行为。我得检查一下你的建议，提前谢谢你！本质上，这是强制iPad缓存资源，而不是动态渲染，从而导致闪烁。这也会导致应用程序使用更多内存，所以在使用时要小心。因此，这可以解释图像仅在第一次渲染时闪烁的行为。我得检查一下你的建议，提前谢谢你！非常感谢。我花了很长时间试图解决这个问题。同样的问题在这里，我使用iScroll 4滚动高分辨率图像，我有这个闪烁的问题。刚刚把这一行添加到我的图像css中，它就成功了！iscroll4和背景中的图像也存在同样的问题。。我将此解决方案应用于任何元素，di都可以看到改进！非常感谢。非常感谢。我花了很长时间试图解决这个问题。同样的问题在这里，我使用iScroll 4滚动高分辨率图像，我有这个闪烁的问题。刚刚把这一行添加到我的图像css中，它就成功了！iscroll4和背景中的图像也存在同样的问题。。我将此解决方案应用于任何元素，di都可以看到改进！非常感谢。海维斯泰尔姆·奥利·塔恩·海维斯泰尔姆·奥利·塔恩