Javascript: Kann einfach nicht geladen werden GIF zum Anzeigen

Ich bin nicht sehr begabt in Javascript, aber ich dachte, dass ich etwas ziemlich einfaches tat.Javascript: Kann einfach nicht geladen werden GIF zum Anzeigen

Ich habe eine HTML-Datei, die nur in einem Browser ausgeführt werden kann, weil in Verwendung wird es keinen Zugriff auf WLAN oder Handy geben. Ich benutze nur Javascript, um die benötigten Ressourcen zu minimieren.

Es durchsucht ca. 6500 Datensätze und gibt Übereinstimmungen zurück. Dies funktioniert gut auf Android (1 bis 2 Sekunden), aber iPad3 (nur IOS muss ich testen), dauert etwa 30 Sekunden, also möchte ich ein "Searching DIV" hinzufügen, um zu zeigen, dass es läuft.

Ich erstellte, was ich dachte, war ein einfacher Test, um dies auszuprobieren - Schlaf-Schleife und eine Show/ausblenden div für meine Suche Nachricht.

Die Suche DIV ist nie gesehen und ich verstehe nicht, warum die Fortschrittsnachrichten nicht in Intervallen von einer Sekunde angezeigt werden, aber alle gleichzeitig, wenn die Schlafschleife abgeschlossen ist.

Ich habe offensichtlich einige interne Prozesse falsch verstanden.

<style> 
    #LoadingGIF { z-index: 100; 
    position: absolute; 
    top: 50%; left: 50%; 
    margin-top: -100px ; margin-left: -100px; 
    display: none; } 

</style> 
<title>tutSleep</title> 

</head> 

<body> 
    <h1>Sleep and Searching message test</h1> 
    <div id="process"> 

    </div> 
    <div id="LoadingGIF"> 
     Searching for your matches 
</div> 
<!-- <img id="LoadingGIF" src="Loading.gif" /> 
--> 

<script type="text/javascript"> 

    showResults(); 

    function showResults() { 
     var p = document.getElementById('process'); 
     p.innerHTML = ""; 
     var g = document.getElementById('LoadingGIF'); 
     g.style.display = "block"; 


     for (var x=1;x<6;x++) { 
      sleep(1000); //sleep fo 1 second 
      p.innerHTML = p.innerHTML + getDateTime() + "<br>"; 
     } 
     g.style.display = "none"; 
    } 

    // Delay for a number of milliseconds 
    // This will be a big javascript text search of approximately 6,500 text strings of 100+ characters. 
    // It performs well on Android and 
    // this GIf not really needed but iPad 3 it can take up to 30 secs. 
    // 

    function sleep(delay) { 
     var start = new Date().getTime(); 
     while (new Date().getTime() < start + delay); 
    } 


    function getDateTime() { 

    var date = new Date(); 

    var hour = date.getHours(); 
    hour = (hour < 10 ? "0" : "") + hour; 

    var min = date.getMinutes(); 
    min = (min < 10 ? "0" : "") + min; 

    var sec = date.getSeconds(); 
    sec = (sec < 10 ? "0" : "") + sec; 

    var year = date.getFullYear(); 

    var month = date.getMonth() + 1; 
    month = (month < 10 ? "0" : "") + month; 

    var day = date.getDate(); 
    day = (day < 10 ? "0" : "") + day; 

    return year + "/" + month + "/" + day + "&#160;&#160;" + hour + ":" + min + ":" + sec; 

} 
</script>

Quelle

2017-02-21 mcl

Haben Sie darüber nachgedacht, die ganze "dauert etwa 30 Sekunden" -Situation zu beheben? –

Es ist ein einfaches Javascript-Array von Strings und ich mache eine Übereinstimmung auf ein oder zwei Wörter gegen jeden Array-Eintrag. Da es auf Android (Galaxy S4 und neueren Galaxien) so gut funktioniert, kenne ich keine Methode, um es einfacher zu machen. Die HTML-Datei ist insgesamt 2 MB. – mcl

Wenn Sie so schlafen, hat das viele Nachteile.

Es frisst alle Ressourcen, die es kann, und es blockiert das Javascript "thread", es wird auch ein Problem mit wenig Speicher schnell verursachen.

Statt eine Weile zu verwenden, machen Sie Javascript wirklich warten:

var lastCall = -1; 
var timeToSleep; 
var callback; 
function sleep(delay, cb) { 
    if (lastCall == -1) { 
     lastCall = Date.now(); 
     timeToSleep = delay; 
     callback = cb; 
    } 
    if (Date.now() - lastCall < timeToSleep) { 
     requestAnimationFrame(sleep); 
    } else { 
     lastCall = -1; 
     callback(); 
    } 
}

Dann sind Sie es so nennen:

sleep(6000, function() { 
    // 6 seconds later 
});

Quelle

2017-02-21 11:01:15

Danke - ich werde dies umsetzen, wenn ich nach Hause komme - im Moment unterwegs. – mcl

JavaScript ist single threaded. In diesem einfachen Test konsumieren Sie diesen Thread und daher wird GIF erst angezeigt, wenn Ihre gesamte showResults() -Methode nicht abgeschlossen ist.

Mit dem tatsächlichen Code (in dem Sie AJAX-Aufruf machen würden), sollte Ihre obige Logik funktionieren. Auch "position: fixed" ist in solchen Szenarien besser geeignet, da der Fortschritts-GIF an einer festen Position angezeigt wird, auch wenn Sie mit scroll spielen.

Aktualisiert: Sie können Ihre Daten (JSON) in separate JS-Datei und dann laden Sie diese Datei mit $ .getJSON() -Funktion. Zeige dein Gif, bevor du diese Funktion aufruft, und blende es dann in der Erfolgsfunktion aus.

Quelle

2017-02-21 11:08:21 BilalS

Danke für die feste Spitze. Um es einfach zu halten, weil es alles offline ist, habe ich Bibliotheken vermieden. Die Daten sind in der HTML-Datei als Javascript-Array enthalten. – mcl

Wenn Daten Teil Ihrer HTML-Seite sind, bedeutet dies, dass Daten + HTML auf Client-Seite zusammen heruntergeladen werden. Und dann passiert die Verarbeitung. Auf diese Weise können Sie die setTimeout-Funktion verwenden, um Ihre Verarbeitungs-Junks zu verarbeiten, aber das ist kein guter Ansatz, um damit umzugehen. Problem ist beim Herunterladen, nicht bei der Verarbeitung (ich nehme an). – BilalS

Javascript: Kann einfach nicht geladen werden GIF zum Anzeigen

Antwort

Verwandte Themen