Ng重复没有冻结用户界面超过12k记录

我有超过12K的图像大多10x10大小转换为base64在json数组，和我有图像的大小在json和x，y坐标，我想要在屏幕上显示的图像，的JSON像这样Ng重复没有冻结用户界面超过12k记录

[{"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重复看起来像这样

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

我用它为我工作#wrapper指定位置设置为相对图像的快速加载的base64，现在的结果看起来像屏幕的这个

它的一小截屏只是一个想法

问题是，NP-重复甚至冻结了几秒钟，直到UI屏幕上的装载机被更新时，我要的是保持运行，直到NG重复完成装载机

我也发现了类似的问题与ng重复，但似乎没有解决我的问题

来源

2016-12-16 Wasif Khalil

为什么你想立刻呈现12K的图片？使用分页，延迟加载或虚拟滚动。 –

这就是我发布了一个小截图的原因，它的广告牌与多个图像 –

您可以使用collection-repeat。它针对Ionic Frameworks进行了优化。您可以阅读关于它here。

事情是这样的：

collection-repeat="item in items"

来源

2016-12-16 21:06:39

他们如何使用它？这个答案似乎不完整。 – 4castle

而不是使用'ng-repeat'，他们应该用'collection-repeat'编写它 –

问题：我也使用离子滚动进行xy滚动，并且当我更改为collection - 重复显示控制台上的此错误“collection-repeat预期父级x或y scrollView，而不是xy scrollView。“即使我将它设置为x，然后它显示另一个错误“ERR_INVALID_URL”，因为即时通讯使用base64 url“background-image：url（data：image/png; base64，{{ad.image}}）” –

Ng重复没有冻结用户界面超过12k记录

回答

相关问题