如何使用Angular+Ionic修复图像滚动时的滞后/起伏

Question

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

我使用的是标准离子含量标签。我的ng重复是

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

如果我在ng重复中有以下代码，它可以很好地工作，滚动是完美的：

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

然而，当我试图使用angular为重复数组中的每个项目提供不同的图像时，我遇到了滞后问题：

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

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

Answer 1

您可以在ion内容标签中尝试溢出卷轴="true"。

示例：

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

它给了我巨大的业绩提升。

Answer 2

您应该看看Ionic的新集合重复功能，它可以帮助您提高巨大列表的性能。这里有一个广泛的代码示例。

来自文档：

<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>