JavaScript: как показать счетчик, пока файл не загрузится

Question

У меня есть кнопка для загрузки файла Excel. Когда пользователь нажимает кнопку, вызывается функция onClick. window.location = url

, и когда загрузка будет завершена, появится диалоговое окно сохранения как файла.

Теперь я хочу показать счетчик, пока не появится диалоговое окно файла. Как мне это сделать?

Я попытался создать спиннер до «window.location» и скрыть его после этого, но спиннер ушел немедленно, потому что window.location не блокируется, пока файл не загрузится.

Есть идеи?

Спасибо.

Answer 1

Это сделано так:

<script type="text/javascript">
//<![CDATA[
function download(url){
document.getElementById('spinner').style.display='';
frame = document.createElement("iframe");
frame.onload=function(){document.getElementById('spinner').style.display='none';}
frame.src=url;
document.body.appendChild(frame);
}
//]]>
</script>

В вашем HTML, настройте счетчик и готов к работе:

<div id="spinner" style="background:url('/images/ico-loading.gif') #000 center no-repeat;opacity:.5;width:100%;height:100%;display:none;position:absolute" />

Затем позвоните, используя это:

<button type="button" onclick="download('/spreadsheet.xls');">DOWNLOAD SPREADSHEET</button>

Кнопка вызовет нашу функцию javascript с URL-адресом, который мы хотим загрузить. В это время мы видим скрытый спиннер DIV и позволяем ему захватить весь экран (позиция примечания абсолютная по стилю). IFRAME создается, чтобы высосать файл. После загрузки файла он передается пользователю и запускается событие .ONLOAD, которое скрывает счетчик DIV. Все сделано с помощью клиентского JavaScript!

Answer 2

Вы не можете сделать это, используя только клиентский скрипт, потому что нет события для завершения загрузки.

Вам потребуется загрузить файл через прокси-страницу на сервере с уникальным идентификатором в URL, чтобы можно было идентифицировать каждую загрузку. Затем вы можете отправлять запросы AJAX из сценария на сервер, чтобы определить статус загрузки.

Answer 3

Этот код работает для jQuery, но с простой модификацией также для javascript. При этом вам вообще не нужно будет менять коды запросов.

1. Создайте элемент div, содержащий анимацию (либо другой элемент div с css-animation, либо анимированный gif в элементе img), и присвойте ему id = "loadingicondiv". Например, вот так

    &ltdiv id="loadingicondiv">
    &ltdiv id="loadingicon" style="background:url('imgs/logo.png') center no-repeat;opacity:1.0;display:none;position:absolute;z-index: 9999;">&lt/div>&lt/div>

2. Установите стиль этого div в вашем файле css следующим образом

    #loadingicondiv{
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0, 0.3);
        position: fixed;
        z-index: 9999;
    }

3. В файле JS для встраивания введите этот

    function showAnimation(){
        $('#loadingicondiv').css({display : ''});
    };

    function hideAnimation(){
        $('#loadingicondiv').css({display : 'none'});
    };

    $(document).ajaxStart(showAnimation).ajaxStop(hideAnimation);

Эта последняя строка означает, что каждый запрос, отправляемый вашим веб-приложением, выполняет функцию "showAnimation" в начале и выполняет функцию "hideAnimation", когда запрос выполнен.

Если вы не используете jQuery и вам нужен чистый javascript, просто замените $ ('# loadingicondiv') на следующий код

document.getElementById('loadingicondiv').style.display = 'none'

Примечание. В случае частого обновления вашего веб-сайта, для которого вы не хотите показывать эту анимацию, просто сделайте отображение анимации зависимым от глобальной переменной, для которой вы установили значение false перед отправкой этих специальных запросы, для которых вы не хотите показывать анимацию. И не забудьте установить его в true, когда запрос будет выполнен ими.