Ng-Wiederholung ohne Einfrieren UI auf über 12k Datensätze

Ich habe über 12k Bilder meist 10x10 Größe in Base64 konvertiert in einem JSON-Array, und ich habe die Größe des Bildes in den JSON und X, Y-Koordinaten, wo ich will zeigen das Bild auf dem Bildschirm aussehen die json wie dieseNg-Wiederholung ohne Einfrieren UI auf über 12k Datensätze

[{"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"}....

jetzt im diese Bilder auf Ionic1 AngularJS mobile Application

ng-Repeat sieht wie folgt aus

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

zeigt

ich base64 für schnelles Laden des Bildes verwendet, die für mich und #wrapper Position gearbeitet wird relativ gesetzt, jetzt sieht das Ergebnis wie dieses

seine einen kleinen Screenshot des Bildschirms nur für eine Idee

Problem ist, während np-Wiederholung auch der loader auf dem Bildschirm für einige Sekunden, bis der UI fror aktualisiert wird, alles, was ich möchte, dass die Lader bis ng-repeat Finish

i ähnliche Probleme gefunden haben, am laufen zu halten ist mit ng-repeat aber nichts scheint um mein Problem zu lösen

Quelle

2016-12-16 Wasif Khalil

Warum würden Sie sofort 12k Bilder machen möchten? Verwenden Sie Paging, Lazy Load oder virtuelles Scrollen. –

Das ist der Grund, warum ich einen kleinen Screenshot gepostet habe, es ist eine Werbetafel mit mehreren Bildern –

Sie können collection-repeat verwenden. Es ist optimiert für Ionic Frameworks.

Sie können darüber lesen here.

Etwas wie folgt aus:

collection-repeat="item in items"

Quelle

2016-12-16 21:06:39

Wie können sie es verwenden? Diese Antwort scheint unvollständig zu sein. – 4castle

Anstatt "ng-repeat" zu verwenden, sollten sie es mit 'sammlung-wiederholen' schreiben. –

Problem: Ich benutze auch ion-scroll für xy Scrolling und wenn ich in Sammlung geändert habe-wiederhole es diesen Fehler auf der Konsole" collection-repeat erwartet ein Elternteil x oder y scrollView, kein xy scrollView. " und selbst wenn ich es auf x setze, dann zeigt es einen anderen Fehler "ERR_INVALID_URL", weil ich mit base64 url "Hintergrundbild: url (Daten: image/png; base64, {{ad.image}})" –

Ng-Wiederholung ohne Einfrieren UI auf über 12k Datensätze

Antwort

Verwandte Themen