Javascript: Просто не получается загрузить GIF для отображения

Я не очень разбираюсь в javascript, но я думал, что делаю что-то очень простое.Javascript: Просто не получается загрузить GIF для отображения

У меня есть HTML-файл, который можно запустить только в браузере, потому что в использовании не будет доступа к Wi-Fi или мобильному телефону. Я использую javascript только для минимизации необходимых ресурсов.

Он ищет около 6500 записей и возвращает совпадения. Это отлично работает на Android (от 1 до 2 секунд), но iPad3 (только IOS, на котором я должен протестировать), занимает около 30 секунд, поэтому я хочу добавить «Поиск DIV», чтобы показать, что он работает.

Я создал то, что, как я думал, был простым тестом, чтобы попробовать это - цикл сна и показать/скрыть div для моего поискового сообщения.

Поиск DIV никогда не видел, и я не понимаю, почему сообщения о ходе выполнения не отображаются с интервалом в одну секунду, но все сразу, когда цикл сна завершен.

Я, очевидно, неправильно понял некоторые внутренние процессы.

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

источник

2017-02-21 mcl

Вы задумывались над тем, чтобы зафиксировать ситуацию «занимает около 30 секунд»? –

Это простой массив строк javascript, и я делаю совпадение по одному или двум словам против каждой записи массива. Поскольку он работает так хорошо на Android (Galaxy S4 и более новые галактики), я не знаю ни одного метода, чтобы сделать его проще. Файл HTML в целом составляет 2 МБ. – mcl

Когда вы спите, как это, у этого есть много недостатков.

Он съедает все ресурсы, которые он может, и он блокирует «поток» javascript, это также вызовет проблему с памятью очень быстро.

Вместо того, чтобы использовать какое-то время, сделать Javascript действительно ждать:

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

Тогда вы называете это так:

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

источник

2017-02-21 11:01:15

Спасибо - я осуществлю это, когда вернусь домой - путешествую в данный момент. – mcl

JavaScript однопоточен. В этом простом тесте вы потребляете этот поток, и поэтому вы не увидите этот GIF до тех пор, пока весь ваш метод showResults() не будет завершен.

С фактическим кодом (в котором вы будете звонить AJAX) ваша логика выше должна работать. Также наличие «позиции: исправлено» более подходит в таких сценариях, поскольку это будет продолжать показывать прогресс в фиксированном положении, даже если вы будете играть со свитком.

Обновлено: Вы можете разместить свои данные (JSON) в отдельном JS-файле, а затем загрузить этот файл с помощью функции $ .getJSON(). Покажите свой gif перед вызовом этой функции, а затем спрячьте ее в функции успеха.

источник

2017-02-21 11:08:21 BilalS

Спасибо за фиксированный наконечник. Чтобы это было просто, потому что это все в автономном режиме, я избегал библиотек. Данные содержатся в файле HTML в виде массива javascript. – mcl

Если данные являются частью вашей html-страницы, это означает, что данные + html загружаются на стороне клиента вместе. И тогда происходит обработка. Таким образом, вы можете использовать функцию setTimeout для выполнения своих обработок, но это не будет хорошим подходом к ее обработке. Проблема связана с загрузкой, а не с обработкой (я полагаю). – BilalS

Javascript: Просто не получается загрузить GIF для отображения

ответ

Смежные вопросы