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

然而，当我尝试使用角度来为重复数组中的每个项目创建不同的图像时，我遇到了滞后问题：

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

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

Answer 1

您可以尝试overflow-scroll =＆＃34; true＆＃34;在离子含量标签中。

示例：

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

如何使用Angular + Ionic修复滞后/不连续滚动图像？

2 个答案: