我如何通过与角+离子图像定影laggy /波涛汹涌的滚动?(How do I fix laggy/c

2019-10-20 23:37发布

我在建设有PhoneGap的,离子和角iOS应用程序,当我使用的是IMG SRC(或NG-SRC)NG-重复这里我有一个问题了图像的页面滚动变得不可接受风声鹤唳/ laggy时滚动过去的图像(你能想象图像的页面上的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">

但是,当我尝试使用的角度有不同的图像的重复阵列我遇到的滞后问题中的每个项目:

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

我一直在使用各种离子含量滚动设置和Bindonce尝试过,但至今没有任何帮助。 感谢所有帮助您可以提供!

Answer 1:

您可以尝试在离子含量标签溢出滚动=“真”。

例:

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

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



Answer 2:

你应该看看新的集合重复功能离子的,它可以帮助你增加巨大列表的效果。 在这里 ,你有一个广泛的代码示例。

从文档:

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


文章来源: How do I fix laggy/choppy scrolling through images with Angular + Ionic?