Div erscheint momentan auf pageload - wie kann ich damit aufhören?

Question

Ich habe ein einfach bisschen HTML:

<input type="text" id="lk" /> 
<div id="showDiv"> 
    <input type="radio" name="lki" id="lki1" value="lki1"> <label for="lki1">Anywhere</label> 
    <input type="radio" name="lki" id="lki2" value="lki2"> <label for="lki2">Start</label> 
</div> 

Und das JS:

// page load 
$(document).ready(function() { 
    var bla = $('#lk').val(); 
    if(bla.length > 0){ 
    $('#showDiv').show(); 
    } 
    else { 
    $('#showDiv').hide(); 
    } 
}); 

// show/hide the "showDiv" content when a user types into the #lk text input field 
$('#lk').bind('keyup change',function(){ 
    if(this.value.length > 0){ 
    $('#showDiv').show(); 
    } 
    else { 
    $('#showDiv').hide(); 
    } 
}); 

Es gibt zwei Teile auf die JS. Die erste sollte das `#showDiv'-Div anzeigen, wenn das '#lk' Texteingabefeld Daten enthält.

Die zweite zeigt/hide `#showDiv 'basierend darauf, ob jemand Daten in das' #lk 'Texteingabefeld eingibt.

Das Problem, das ich habe, ist mit dem ersten Bit von JS, für die Seite zu laden:

// page load 
$(document).ready(function() { 
    var bla = $('#lk').val(); 
    if(bla.length > 0){ 
    $('#showDiv').show(); 
    } 
    else { 
    $('#showDiv').hide(); 
    } 
}); 

Wenn die Seite geladen wird, werden die Radio-Buttons in der `#showDiv‘ div oft kurz erscheinen dann verschwinden, wenn Das '#lk' Texteingabefeld ist leer.

Wenn sich unterhalb des Formulars Inhalt befindet, scheint der Inhalt zu springen, da das `#showDiv'-Teil angezeigt wird und dann sehr schnell ausgeblendet wird.

Gibt es eine bessere Möglichkeit, den `#showDiv'-Div zu verstecken, wenn das '#lk' Texteingabefeld leer ist, wenn die Seite zuerst geladen wird?

Answer 1

würde ich diese CSS-Regel hinzufügen, einen Anfangszustand zu setzen, wo der DIV nicht angezeigt wird:

#showDiv { 
    display: none; 
} 

(Das unter der Bedingung abhängig ändert in Ihrer jQuery-Funktion, aber diese Regel wird sicherstellen, dass DIV erscheint nicht einmal für eine Millisekunde, wenn die Seite geladen wird, bevor die jQuery-Funktion ausgeführt wird.

Answer 2

Das div erscheint kurzzeitig, weil es Zeit braucht, bis JavaScript die dahinter liegende Logik herunterlädt und ausführt. Um das Problem zu beheben, müssen Sie das Element standardmäßig ausblenden und dann bei Bedarf umschalten.

Und wie GolezTrol bereits in seinem Kommentar erwähnt Sie, dass display: none mit tun

Answer 3

Fügen Sie den folgenden Code direkt in das Element

style="display:none" 

Zum Beispiel

<div id="showDiv" style="display:none"> 

Dieses das Element macht versteckt, sobald der Browser es rendert. Wenn Sie es über Javascript verstecken, wird das Element gerendert und angezeigt, bevor das Javascript es verbergen kann.

Hoffe, das hilft.