Javascript: Impossible d'obtenir un GIF de chargement pour afficher

Je ne suis pas très douée en javascript, mais je pensais que je faisais quelque chose de très simple.Javascript: Impossible d'obtenir un GIF de chargement pour afficher

J'ai un fichier HTML, qui peut être exécuté uniquement dans un navigateur, car en cours d'utilisation il n'y aura pas d'accès au wifi ou au téléphone portable. J'utilise javascript uniquement pour minimiser les ressources nécessaires.

Il recherche environ 6500 enregistrements et renvoie des correspondances. Cela fonctionne bien sur Android (1 à 2 secondes), mais iPad3 (seulement IOS que je dois tester), prend environ 30 secondes, donc je veux ajouter un "DIV de recherche" pour montrer qu'il est en cours d'exécution.

J'ai créé ce que je pensais être un simple test pour essayer cette sortie - sleep loop et un div show/hide pour mon message de recherche. Le DIV de recherche n'est jamais vu et je ne comprends pas, pourquoi les messages de progression ne sont pas affichés à intervalles d'une seconde, mais tous à la fois lorsque la boucle de sommeil est terminée.

J'ai évidemment mal compris certains processus internes.

<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>

Source

2017-02-21 mcl

Avez-vous pensé à corriger l'ensemble de la situation "prend environ 30 secondes"? –

C'est un tableau javascript simple de chaînes et je fais une correspondance sur un ou deux mots contre chaque entrée de tableau. Comme il fonctionne si bien sur Android (Galaxy S4 et plus récent des Galaxies), je ne connais aucune méthode, pour le rendre plus simple. Le fichier HTML au total est 2mb. – mcl

Lorsque vous dormez ainsi, cela présente de nombreux inconvénients.

Il mange toutes les ressources qu'il peut et il bloque le "thread" javascript, il provoquera aussi un problème de mémoire très rapidement.

Au lieu d'utiliser un certain temps, faire javascript vraiment attendre:

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(); 
    } 
}

Puis invoquez comme ceci:

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

Source

2017-02-21 11:01:15

Merci - Je le mettrai en œuvre lorsque je serai de retour à la maison - voyageant en ce moment. – mcl

JavaScript est un seul thread. Dans ce test simple, vous consommez ce thread et par conséquent vous ne verrez pas ce fichier GIF tant que la méthode showResults() ne sera pas terminée.

Avec le code réel (dans lequel vous appelleriez AJAX), votre logique ci-dessus devrait fonctionner. Avoir aussi "position: fixed" est plus approprié dans de tels scénarios que cela continuera à montrer la progression gif à une position fixe même si vous jouerez avec scroll.

Vous pouvez placer vos données (JSON) dans un fichier JS distinct, puis charger ce fichier en utilisant la fonction $ .getJSON(). Montrez votre gif avant d'appeler cette fonction, puis cachez-la dans la fonction de réussite.

Source

2017-02-21 11:08:21 BilalS

Merci pour la pointe fixe. Pour rester simple, parce que tout est hors ligne, j'ai évité les bibliothèques. Les données sont contenues dans le fichier HTML en tant que tableau javascript. – mcl

Si les données font partie de votre page html, cela signifie que les données + html sont téléchargées au niveau du client ensemble. Et puis le traitement arrive. De cette façon, vous pouvez utiliser la fonction setTimeout pour effectuer vos joutes de traitement mais cela ne sera pas une bonne approche pour le gérer. La question est avec le téléchargement, pas avec le traitement (je suppose). – BilalS

Javascript: Impossible d'obtenir un GIF de chargement pour afficher

Répondre

Questions connexes