JS angolari: Rileva quando il contenuto pagina ha reso completamente ed è visibile

Question

La mia situazione

Ho una lista BIG di persone che hanno tutti il ​​loro profilo Foto Personali e di informazione. Tutti gli oggetti hanno alcuni stili/animazioni CSS3.

Im usando:

<li ng-repeat="person in people"> 

Dove la gente è un array con oltre 150 oggetti da un file JSON esterno che tutti devono mostrare sulla stessa pagina.

La pagina si carica/esegue il rendering lentamente, e non a causa della funzione $ http GET che ottiene i dati JSON con le persone (richiede solo circa 100ms), ma il rendering della pagina e apparentemente il rendering di tutti i css3 stile applicato a ciascun oggetto (se spengo il mio CSS, diventa molto più veloce).

Il mio problema principale

posso vivere con la pagina il rendering lentamente, ma quello che voglio veramente è quello di individuare ogni volta che la mia pagina pesante ha caricato il suo contenuto al fine di avviare e interrompere un indicatore carico. Ive ha provato facendo una direttiva come questa:

directive("peopleList", function() { 
    return function (scope, element, attrs) { 
     scope.$watch("people", function (value) { 
      var val = value || null; 
      console.log("Loading started"); 
      if (val){ 
       console.log("Loading finished"); 
      } 
     }); 
    }; 
}); 

e mettere questa direttiva sulla div involucro che sta caricando la mia lista di persone. Ma il caricamento sembra fermarsi ogni volta che il mio oggetto con dati JSON è stato riempito, che richiede solo circa 100ms, ma il rendering visivo effettivo della pagina richiede più di 4-5 secondi.

Ive ha anche provato soluzioni come http://jsfiddle.net/zdam/dBR2r/ ma ottengo lo stesso risultato lì.

cosa ho bisogno

Se navigando attraverso le mie pagine (che hanno tutti lo stesso tipo di liste) ho bisogno di qualcosa che mi dice ogni volta che la pagina non completamente caricato ed è visibile per l'utente in modo che so quando nascondere il mio indicatore di caricamento.

Answer 1

Prova ad aggiungere questa direttiva - la magia è nella funzione di collegamento:

directives 
    .directive('onFinishRender', function ($timeout) { 
    return { 
    restrict: 'A', 
    link: function (scope, element, attr) { 
     if (scope.$last === true) { 
      scope.$evalAsync(attr.onFinishRender); 
     } 
    } 
    } 
}); 

Aggiungi un caricatore come primo elemento:

<li ng-show="!isDoneLoading"> 
    <div class="loading">Loading...</div> 
</li> 

Poi, nel tuo li, aggiungere questo:

<li ng-repeat="..." on-finish-render="isDoneLoading = true;"> ... </li>