Wie erfolgt eine korrekte Verzögerung vor der Ausführung der Funktion?

Also, ich versuche eine Lade-Animation für meine Website auf ASP.NET WebForms zu tun. Ich habe festgestellt, dass einige Seiten sehr schnell geladen werden und andere nicht. Ich habe eine Ausführung einer Animation auf diese Weise hergestellt:Wie erfolgt eine korrekte Verzögerung vor der Ausführung der Funktion?

$(document).ready(function() { 

     $('#loadingImage').hide(); 
     $('#loading').html(""); 
    });

Aber jetzt will ich eine Verzögerung machen, etwa in 1-2 sec für Seiten, die schnell geladen werden nicht für sie um die Animation zu zeigen. Ich versuche, dies auf diese Weise zu tun:

setTimeout(checkDocument, 3000); 

    function hideLoading() { 
     $('#loadingImage').hide(); 
     $('#loading').html(""); 
    } 

    function checkDocument() { 
     $(document).ready(hideLoading); 
    };

Mein HTML-Code:

<div id="loading" style="text-align: center" ><asp:Image ID="loadingImage" runat="server" ImageUrl="~/Images/loading.gif" /></div>

So funktioniert dies falsch. Dieser Code hat meine Animation sofort ausgeführt und dann die Animation in 3 Sekunden beendet. Hilfe, um den richtigen Weg dafür zu finden. Und noch eine, ich habe diese Codezeile

$('#loading').html("");

Warum, wenn wir nicht nichts als Argument in HTML-Teil verwenden, dann Animation kann nicht aufhören, wenn wir „“, um den HTML-Code übernehmen dann alles funktioniert. Bitte, erkläre diesen Moment.

Quelle

2016-07-20 whoiskatrin

Ehrlich gesagt verstehe ich nicht, warum Sie eine solche Verzögerung brauchen. Wenn eine Seite schnell geladen wird, wird die Animation schnell ausgeblendet, damit der Endbenutzer sie nicht bemerkt. – hindmost

@hindmost Ich denke schon, aber es ist leider sichtbar und sieht aus wie etwas, das schlecht funktioniert. – whoiskatrin

@whoiskatrin: posten Sie Ihre html –

Sie müssen die Ladeanimation zunächst unsichtbar machen und dann nach einer Verzögerung sichtbar machen. Verwenden Sie schließlich das Ereignis document.ready, um es auszublenden, wenn alles geladen ist. Was Sie gerade tun, ist nur die Erstellung des document.ready Event Handlers zu verzögern, was keinen Sinn macht. (Vergessen Sie nicht, einen Ereignishandler zu schaffen ausführen nicht tatsächlich die Funktion sofort, schafft es nur etwas, das für den Fall, hört in der Zukunft auftreten.)

ändern div Definition

<div id="loading" style="text-align: center" hidden>

Es sollte das erste Ding sein, das in den <body> Abschnitt Ihrer Seite gesetzt wird, wenn möglich.

Dann unmittelbar darunter, setzen Sie das folgende Skript-Tag:

<script> 
    function showLoading() { 
    $("#loading").show(); 
    } 

    var loadingTimeout = setTimeout(showLoading, 3000); 

    $(document).ready(function() { 
    clearTimeout(loadingTimeout); //make sure loader doesn't appear if page loads in less than 3 seconds 
    $("#loading").hide(); 
    }); 
</script>

Quelle

2016-07-20 13:11:25 ADyson

Vielen Dank für die Erklärung. – whoiskatrin

Wie erfolgt eine korrekte Verzögerung vor der Ausführung der Funktion?

Antwort

Verwandte Themen