javascript - Ng-repeat 不会卡住超过 12k 条记录的 UI

Question

我有超过 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 中发现了类似的问题，但似乎没有解决我的问题

Answer 1

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

您可以阅读here .

类似这样的事情:

collection-repeat="item in items"