如何使用Angular + Ionic修复延迟/不连续滚动图像？ [英] How do I fix laggy/choppy scrolling through images with Angular + Ionic?

问题描述

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

I'm building an iOS app with Phonegap, Ionic and Angular, and am having an issue where when I'm using ng-repeat with img src (or ng-src) the scrolling for a page of images becomes unacceptably jittery / laggy when scrolling past the images (you can imagine an Instagram or Facebook-like feed of images on a page). I seem to have the issue both when I load the page in Safari as well as on an iPhone. Chrome seems to be much better, so I perhaps it's a problem related to Safari?

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

I'm using standard ion-content tags. My ng-repeat is

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

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

If I have the following code within the ng-repeat it works fine and the scrolling is perfect:

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

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

However, when I try to use angular to have different images for each item in the repeated array I encounter the lag issue:

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

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

I've tried using various ion-content scrolling settings and Bindonce, but nothing has helped so far. Appreciate any help you can provide!

推荐答案

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

You can try overflow-scroll="true" in ion-content tag.

示例：

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

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

It gave me huge performance boost.

这篇关于如何使用Angular + Ionic修复延迟/不连续滚动图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！