如何使用 Angular + Ionic 修复延迟/不连贯的图像滚动？

Question

我正在使用 Phonegap、Ionic 和 Angular 构建 iOS 应用程序，并且遇到一个问题，当我将 ng-repeat 与 img src（或 ng-src）一起使用时，图像页面的滚动变得不可接受地抖动/ 滚动图像时滞后（您可以想象页面上的 Instagram 或类似 Facebook 的图像提要）。当我在 Safari 和 iPhone 上加载页面时，我似乎都遇到了这个问题。 Chrome似乎好多了，所以我可能是与Safari有关的问题？

我正在使用标准的离子含量标签。我的 ng-repeat 是

<div ng-repeat="post in myPosts track by $index">

如果我在 ng-repeat 中有以下代码，它可以正常工作并且滚动是完美的：

<img ng-src="https://s3.amazonaws.com/exampleS3Bucket/photos/somephoto.jpg">

但是，当我尝试使用 angular 为重复数组中的每个项目设置不同的图像时，我遇到了滞后问题：

<img ng-src="{{post.image.url}}" >

我尝试过使用各种 ion-content 滚动设置和 Bindonce，但到目前为止没有任何帮助。感谢您提供的任何帮助！

Answer 1

您可以在 ion-content 标签中尝试overflow-scroll="true"。

例子：

<ion-content overflow-scroll="true">

它给了我巨大的性能提升。

Answer 2

您应该看看 Ionic 的新 collection repeat feature，它可以帮助您提高大型列表的性能。 Here 你有一个广泛的代码示例。

来自文档：

<ion-content ng-controller="ContentCtrl">
  <div class="list">
    <div class="item my-item"
      collection-repeat="item in items"
      collection-item-width="'100%'"
      collection-item-height="getItemHeight(item, $index)"
      ng-style="{height: getItemHeight(item, $index)}">
      {{item}}
    </div>
  </div>
</div>