我正在为 iPad 优化移动应用程序（使用 angular1/ionic1 构建）并且遇到了问题。我正在尝试创建一个两列砌体效果，从左到右加载每个“卡片项目”（从网络请求返回）。我正在使用Angular-Masonry当我在实际的 iPad 上测试时，这似乎在本地运行得很好，但不是很好。我正在我的 iPad Mini 2（大约 3 岁）上进行测试，当应用程序首次加载时，大约一秒钟，所有从网络请求堆栈/重叠返回的图像在砌体效果开始之前相互重叠并按照我想要的方式对其进行格式化。该应用程序还使用离子无限滚动，因此当用户向下滚动时，会发出另一个网络请求，返回更多“卡片项目”。这些卡片项目在第一次呈现到页面时也会相互堆叠大约一秒钟。
我觉得这可能是一个性能问题。我认为这是因为 Angular Masonry 在本地运行良好，而且这种“重叠”错误仅在我在 iPad Mini 2 上进行测试时才会发生。
有没有人有使用 Angular-Masonry 和 Ionic Apps 的经验？几天来，我一直在努力解决这个问题，但无法确定到底出了什么问题。
你可以在这里看到我在其中包含 Angular-Masonry 指令“masonry”到包含 div 和“masonry-brick”到每个“card item”。
<ion-content class="articleContent" scroll="false">
<ion-slide-box slide-tabs-scrollable="true" show-pager="false" on-slide-changed="changeSlide(index)" bounce="false" ion-slide-tabs>
<ion-slide ng-repeat="tab in contents track by $index" ion-slide-tab-label="{{tab.category}}">
<ion-content>
<div class="ipadDiv" ng-switch="tablet">
<div ng-switch-when="true" column-width="60" masonry load-images="false">
<ion-list ng-if="tab.posts.length > 0">
<ion-item class="masonry-brick card" ng-repeat="post in tab.posts track by $index" type="item-text-wrap" ng-click="goto(tab.category, $index)">
<img ng-src="{{::getThumbnail(post.thumbnail)}}" ng-if="::getThumbnail(post.thumbnail) != false">
<div class="text">
<strong ng-bind-html ="::post.title"></strong>
<p class="article-date"> {{::postDate(post.date)}}</p>
</div>
</ion-item>
<div ng-if="showInfiniteLoader && tab.posts.length > 0">
<ion-infinite-scroll distance="15%" ng-if="!showLoadMore"></ion-infinite-scroll>
<ion-infinite-scroll on-infinite="loadMoreArticles(tab.category)" distance="15%" ng-if="showLoadMore"></ion-infinite-scroll>
</div>
<br>
</ion-list>
</div>
<div class="masonryDiv" ng-switch-when="false">
<ion-list ng-if="tab.posts.length > 0">
<ion-item class="card" ng-repeat="post in tab.posts track by $index" type="item-text-wrap" ng-click="goto(tab.category, $index)">
<img ng-src="{{::getThumbnail(post.thumbnail)}}" ng-if="::getThumbnail(post.thumbnail) != false">
<div class="text">
<strong ng-bind-html ="::post.title"></strong>
<p class="article-date"> {{::postDate(post.date)}}</p>
</div>
</ion-item>
<div ng-if="showInfiniteLoader && tab.posts.length > 0">
<ion-infinite-scroll distance="15%" ng-if="!showLoadMore"></ion-infinite-scroll>
<ion-infinite-scroll on-infinite="loadMoreArticles(tab.category)" distance="15%" ng-if="showLoadMore"></ion-infinite-scroll>
</div>
<br>
</ion-list>
</div>
</div>
</ion-content>
</ion-slide>
</ion-slide-box>
</ion-content>