Gibt es in jquery eine Funktion "element ready"?

Question

Ich habe ein Element, das einen CSS-Rahmen hat und das Problem ist, dass das Element leer ist, bis der Inhalt von jQuery gefüllt wird, aber der Rahmen von Anfang an von CSS gezeichnet wird. Ich möchte in der Lage sein, etwas wie machen die Element Sichtbarkeit ausgeblendet, bis es bereit ist, anzuzeigen, dann Element und Rahmen in einem Rutsch zu zeigen.

Gibt es einen Weg, dies zu erreichen?

Edit: der Code den Inhalt anzuzeigen sind in

enthalten

$(window).load(function() { 

} 

Answer 1

Methode 1

Eine Methode, die Sie könnten versuchen, die CSS des Elements display:none; würde Einstellung. Dadurch würde das Element ausgeblendet und beim Aufrufen der folgenden Funktion würde das Element beim Laden des DOM angezeigt.

$(document).ready(function() { 
    // Put all of jQuery code in here 
    $("element").show(); // substitute element for whatever is needed 
}); 

Allerdings würde ich diese Methode nicht den Eindruck erwecken, weil es ein plötzlicher Sprung von Inhalten sein wird, sobald die jQuery ausführt, weil display:none; bedeutet, dass es auf der Seite keine Spur des Elements seine

Methode 2

Die beste Methode wäre meiner Meinung nach visibility:hidden zu verwenden. Dadurch wird der Bereich angezeigt, in dem das Element normalerweise noch angezeigt wird, aber anstelle des Elements wird ein Leerzeichen angezeigt. Auf diese Weise wird beim Laden der Seite kein plötzlicher Inhalt gesprungen. Wenn Sie diese Methode verwenden, müssen Sie die .css() Methode verwenden, da .show() im Wesentlichen die CSS des Elements display:block; So ist der Code-Einstellung wie dieser

$(document).ready(function() { 
    // Put all of jQuery code in here 
    $("element").css("visibility", "visible") // substitute element for whatever is needed 
}); 

Für beide Methoden aussehen wird, wird die CSS Machen Sie das Element verborgen, und diese Funktion wartet, bis das gesamte DOM geladen ist, bevor es ausgeführt wird.

Answer 2

Sie jQuery verwenden könnte addClass einen Stil hinzufügen, die die Grenze kommt, oder vielleicht removeClass eine Klasse von versteckten display:none;

Und zu entfernen Ihre Titel Frage zu beantworten, ist es document.ready, dass Sie suchen!

Answer 3

Sie könnten

$(function(){ 
    // your code here 
}); 

So wird die oben ausgeführt verwenden, wenn das DOM geladen wird. Jetzt müssen Sie nur noch Ihr Element zeigen, das in css visibility:hidden gesetzt hat.

Answer 4

Haben Sie versucht .css()? Sie können die CSS eines Elements ändern. Lesen Sie mehr here.

Zunächst legen Sie es als ausgeblendet, und entfernen Sie es dann.

Answer 5

Verstecken Sie Ihren Artikel zunächst.

$(function(){ 
    $('selector').hide(); // Or you can just have display:none 
    }); 

In einem anderen Abschnitt ein Ereignis mit einem gewissen Inhalt in Ihrem div füllt

.... 
....//some code that fills in your content 
... 
$('selector').show(); 
.... 
.... 

Answer 6

Bereit Elemente funktionieren:

$(document.getElementsByTagName('div')[0]).ready(function() { 
// do stuff when div is ready 

Answer 7

Try this:

$('#element').bind("DOMSubtreeModified", function() { 
    //do stuff 
});