Ng-repeat 不冻结超过 12k 条记录的 UI答案

【问题标题】：Ng-repeat without freezing UI on over 12k recordsNg-repeat 不冻结超过 12k 条记录的 UI
【发布时间】：2017-05-02 17:19:06
【问题描述】：

我有超过 12k 个图像，大部分是 10x10 大小的转换为 json 数组中的 base64，我在 json 和 x,y 坐标中有图像的大小，我想在屏幕上显示图像， json看起来像这样

[{"id":"1","width":"10","height":"10","image":"iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAABFElEQVQYlTWNzUvCcByHP9+x1c9kMv3Jei8J\/QMibHQKSvrjoqCTV2\/dugcdY5CXFaH04hz4lhrl\/G3lVgPXQXuODw88dH33sJYqAPCpywmfMQBwwu90481rUBDEMcOMBAAgAPwo1hVy3W8ZCCkEAMYYgAmCr2ieR2ogj12xsro86A8BITxhOR0AmUz2mXxqDiQpq79HsbuYPjs\/tZzOcenItIPyZaWY0jeLJdlsCQDtUW1r74Abh2ZLeLbnOUlO2M1rdFG9Xegm57Of5usHKxjaSX6fq8q99UjlK2tnXQIw4duzqD2qNarjip+APZHrvV69N\/Md\/FMwtJuUntZzZD69AEjrOQBcVVSFKAwZmwJLg\/7wD2cKcW+hz09jAAAAAElFTkSuQmCC","title":"Sovereign Grace Ministries","url":"http:\/\/www.sovereigngraceministries.org\/","order_id":"6106","x":"0","y":"0"}....

现在我在 Ionic1 AngularJS 移动应用程序上显示这些图像

ng-repeat 看起来像这样

<div id="wrapper">
    <div ng-click="showModal({{ad.order_id}})" ng-repeat="ad in mainBillboard" style="position:absolute;cursor:pointer;background-image: url(data:image/png;base64,{{ad.image}});width:{{ad.width}}px;height:{{ad.height}}px;top:{{ad.y}}px;left:{{ad.x}}px"></div>
</div>

我使用 base64 快速加载对我有用的图像，#wrapper 位置设置为相对，现在结果如下所示

这是一个小屏幕截图，仅供参考

问题是，在 np-repeat 期间，即使屏幕上的加载器冻结了几秒钟，直到 UI 得到更新，我想要的只是加载器继续运行直到 ng-repeat 完成

我发现 ng-repeat 有类似的问题，但似乎没有什么能解决我的问题

【问题讨论】：

为什么要一次渲染 12k 图像？使用分页、延迟加载或虚拟滚动。
这就是我发布小屏幕截图的原因，它是由多张图片组成的广告牌

标签： javascript angularjs ionic-framework angularjs-ng-repeat ng-repeat

【解决方案1】：

您可以使用collection-repeat。它针对离子框架进行了优化。

你可以阅读它here。

类似这样的：

collection-repeat="item in items"

【讨论】：

他们如何使用它？这个答案似乎不完整。
他们应该使用collection-repeat而不是ng-repeat来编写
问题：我也在使用 ion-scroll 进行 xy 滚动，当我更改为 collection-repeat 时，它在控制台上显示此错误“collection-repeat 期望父 x 或 y scrollView，而不是 xy scrollView 。”即使我将其设置为 x，它也会显示另一个错误“ERR_INVALID_URL”，因为我使用的是 base64 url “background-image: url(data:image/png;base64,{{ad.image}})”
@WasifKhalil 它不应该以这种方式发生。你能检查一下你的语法吗？ collection-repeat 的工作方式与 ngrepeat 相同，但在性能方面它更好。
但我想它不适用于将 ion-scroll 设置为 direction="xy" 和 base64 图像 url，我唯一改变的是 collection-repeat 所以我确定没有语法问题