У меня есть веб-приложение, в котором пользователь может создавать файлы PDF и PowerPoint. Этим файлам может потребоваться некоторое время для генерации, поэтому я хотел бы иметь возможность отображать анимацию загрузки во время ее создания. Проблема здесь в том, что я не имею в виду знать, когда загрузка началась. Анимация никогда не исчезает.
Я знаю, что можно было бы создать файл «сбоку» и предупредить пользователя, когда файл будет готов для загрузки с использованием AJAX, но я предпочитаю «блокировать» пользователя, пока он ждет начала загрузки.
Чтобы понять, что нужно сделать здесь, давайте посмотрим, что обычно происходит при таком запросе.
Пользователь нажимает кнопку, чтобы запросить файл.
Файл требует времени для генерации (пользователь не получает никакой обратной связи).
Файл завершен и начинает отправляться пользователю.
Мы хотели бы добавить обратную связь для пользователя, чтобы узнать, что мы делаем … Между шагами 1 и 2 нам нужно реагировать на щелчок, и нам нужно найти способ обнаружить, когда наступил этап 3, чтобы удалить визуальная обратная связь. Мы не будем информировать пользователя о статусе загрузки, их браузер сделает это как с любой другой загрузкой, мы просто хотим сообщить пользователю, что мы работаем над их запросом.
Чтобы скрипт генерации файлов мог взаимодействовать с нашим скриптом, мы будем использовать куки-файлы, это гарантирует, что мы не зависим от браузера в зависимости от событий, iframe и т. П. После тестирования нескольких решений это казалось самым стабильным с IE7 до последних мобильных телефонов.
Мы будем использовать javascript для отображения уведомлений на экране. Я выбрал простой прозрачный черный оверлей на всей странице, чтобы пользователь не мог взаимодействовать с другими элементами страницы, так как ссылка может лишить его возможности получать файл.
$('#downloadLink').click(function() { $('#fader').css('display', 'block'); }); #fader { opacity: 0.5; background: black; position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="fader"></div> <a href="#path-to-file-generator" id="downloadLink">Click me to receive file!</a> </body>
Вы можете извлечь файл, используя индикатор добавления ajax, затем создать тег с dataURI и щелкнуть по нему с помощью JavaScript:
Вам понадобится помощь из этой библиотеки: https://github.com/henrya/js-jquery/tree/master/BinaryTransport
var link = document.createElement('a'); if (link.download != undefined) { $('.download').each(function() { var self = $(this); self.click(function() { $('.indicator').show(); var href = self.attr('href'); $.get(href, function(file) { var dataURI = 'data:application/octet-stream;base64,' + btoa(file); var fname = self.data('filename'); $('<a>' + fname +'</a>').attr({ download: fname, href: dataURI })[0].click(); $('.indicator').hide(); }, 'binary'); return false; }); }); }
Вы можете увидеть поддержку атрибута загрузки на caniuse
и в вашем html поставьте это:
<a href="somescript.php" class="download" data-filename="foo.pdf">generate</a>
Spin.js отлично подходит для этого и легко модифицируется. Вы можете загрузить файл .js из GitHub или google. Затем, чтобы заставить его работать, просто добавьте событие нажатия кнопки или даже лучше для тех, кто использует веб-формы ASP.NET, добавьте триггер отправки события в тег формы …
Это триггер, который я обычно использую: <form id="form1" runat="server" onsubmit="loader();">
И функция загрузчика с настройками спина:
<script type="text/javascript"> function loader() { document.getElementById('loader').style.display = 'block'; } </script> <script src="Scripts/Spin.min.js" type="text/javascript"></script> <script type="text/javascript"> var opts = { lines: 15, // The number of lines to draw length: 25, // The length of each line width: 3, // The line thickness radius: 20, // The radius of the inner circle corners: 0.6, // Corner roundness (0..1) rotate: 0, // The rotation offset direction: 1, // 1: clockwise, -1: counterclockwise color: '#005293', // #rgb or #rrggbb or array of colors speed: 3, // Rounds per second trail: 70, // Afterglow percentage shadow: true, // Whether to render a shadow hwaccel: false, // Whether to use hardware acceleration className: 'spinner', // The CSS class to assign to the spinner zIndex: 2e9, // The z-index (defaults to 2000000000) top: '50%', // Top position relative to parent left: '50%' // Left position relative to parent }; var target = document.getElementById('loader'); var spinner = new Spinner(opts).spin(target); </script>
Вам также нужен div для удержания загрузчика:
<div class="loader" id="loader" style="display:none;"></div>
Также есть некоторые настройки css:
.loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: rgb(50, 50, 50) no-repeat 50% 50%; opacity: 0.8; filter: alpha(opacity=80); }