Wie behandelt man die Verzögerung zwischen einer append() - Funktion?

Question

Ich angehängt ein Array zu einem Div mit jquery, ich möchte eine kleine Ladeanzeige zeigen, während dies geschieht, so warf ich eine Rückruffunktion auf meine Append-Logik. Das funktioniert, aber mein Loader wird es auslöschen bevor mein Array in das Div.

Gibt es eine Möglichkeit, dass ich nur die ausführen kann, nachdem das Array fertig gemalt hat?

var contentpush = []; 
// create x-amount of divs (x being 'tabs') 
for (var i = 0; i < tabs; i++){ 
    contentpush.push('<li class="tab" role="tab"><a href="#tab'+(i+1)+'"><span class="icon"><span class="'+contentformat[i].icon+'" ></span></span><span class="title">'+contentformat[i].title+'</span></a></li>'); 
} 

$('.tablist').append(contentpush.join('')).ready(function(){$('#skeleton').hide(); });; 

ist hier ein gif, was auch geschieht:

Wie Sie das Skelett loader lange verschwinden sehen können, bevor meine Array tatsächlich in die div gemalt. Irgendwelche Gedanken dazu werden sehr geschätzt!

Answer 1

Haben Sie versucht, eine Zeitüberschreitung für einige Millisekunden festzulegen?

Answer 2

Leider enthält die Funktion jQuery .append() keinen Rückruf. Es gibt keine Möglichkeit, wirklich auf Vollständigkeit zu prüfen, wie es angeblich sofort passiert. synchron in der Reihenfolge, in der sie kommen, es sei denn, Sie sagen ihnen explizit, dass sie asynchron sind, indem Sie ein Timeout oder ein Intervall verwenden. see this

Dies bedeutet, dass Ihre .append-Methode ausgeführt wird und nichts anderes ausgeführt wird, bis diese Methode ihre Arbeit beendet hat. versuchen Sie folgendes

// set a time interval for the event to complete. 
$(contentpush).hide().appendTo(".tablist").fadeIn(1000); 

// a small tweak to set a call back function. 
$(".tablist").append(contentpush).append(function() { $('#skeleton').hide(); });