Loading progress in javascript

XMLHttpRequest: индикация прогресса

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/xmlhttprequest.

Запрос XMLHttpRequest состоит из двух фаз:

1. Стадия отправки (upload). На ней данные загружаются на сервер. Эта фаза может быть долгой для POST-запросов. Для отслеживания прогресса на стадии отправки существует объект типа XMLHttpRequestUpload, доступный как xhr.upload и события на нём.
2. Стадия скачивания (download). После того, как данные загружены, браузер скачивает ответ с сервера. Если он большой, то это может занять существенное время. На этой стадии используется обработчик xhr.onprogress .

Далее – обо всём по порядку.

Стадия отправки

На стадии отправки для получения информации используем объект xhr.upload . У этого объекта нет методов, он только генерирует события в процессе отправки. А они-то как раз и нужны.

Вот полный список событий:

Пример установки обработчиков на стадию отправки:

xhr.upload.onprogress = function(event) < alert( 'Загружено на сервер ' + event.loaded + ' байт из ' + event.total ); >xhr.upload.onload = function() < alert( 'Данные полностью загружены на сервер!' ); >xhr.upload.onerror = function()

Стадия скачивания

После того, как загрузка завершена, и сервер соизволит ответить на запрос, XMLHttpRequest начнёт скачивание ответа сервера.

На этой фазе xhr.upload уже не нужен, а в дело вступают обработчики событий на самом объекте xhr . В частности, событие xhr.onprogress содержит информацию о количестве принятых байт ответа.

xhr.onprogress = function(event)

Все события, возникающие в этих обработчиках, имеют тип ProgressEvent, то есть имеют свойства loaded – количество уже пересланных данных в байтах и total – общее количество данных.

Демо: загрузка файла с индикатором прогресса

Современный XMLHttpRequest позволяет отправить на сервер всё, что угодно. Текст, файл, форму.

Мы, для примера, рассмотрим загрузку файла с индикацией прогресса. Это требует от браузера поддержки File API, то есть исключает IE9-.

File API позволяет получить доступ к содержимому файла, который перенесён в браузер при помощи Drag’n’Drop или выбран в поле формы, и отправить его при помощи XMLHttpRequest .

Форма для выбора файла с обработчиком submit :

Мы получаем файл из формы через свойство files элемента и передаём его в функцию upload :

function upload(file) < var xhr = new XMLHttpRequest(); // обработчик для отправки xhr.upload.onprogress = function(event) < log(event.loaded + ' / ' + event.total); >// обработчики успеха и ошибки // если status == 200, то это успех, иначе ошибка xhr.onload = xhr.onerror = function() < if (this.status == 200) < log("success"); >else < log("error " + this.status); >>; xhr.open("POST", "upload", true); xhr.send(file); >

Этот код отправит файл на сервер и будет сообщать о прогрессе при его отправке ( xhr.upload.onprogress ), а также об окончании запроса ( xhr.onload , xhr.onerror ).

Полный пример индикации прогресса при загрузке, основанный на коде выше:

var http = require('http'); var url = require('url'); var querystring = require('querystring'); var static = require('node-static'); var file = new static.Server('.', < cache: 0 >); function accept(req, res) < if (req.url == '/upload') < var length = 0; req.on('data', function(chunk) < // ничего не делаем с приходящими данными, просто считываем length += chunk.length; if (length >50 * 1024 * 1024) < res.statusCode = 413; res.end("File too big"); >>).on('end', function() < res.end('ok'); >); > else < file.serve(req, res); >> // ------ запустить сервер ------- if (!module.parent) < http.createServer(accept).listen(8080); >else

Событие onprogress в деталях

При обработке события onprogress есть ряд важных тонкостей.

Можно, конечно, их игнорировать, но лучше бы знать.

Заметим, что событие, возникающее при onprogress , имеет одинаковый вид на стадии отправки (в обработчике xhr.upload.onprogress ) и при получении ответа (в обработчике xhr.onprogress ).

Оно представляет собой объект типа ProgressEvent со свойствами:

Сколько байт уже переслано.

Имеется в виду только тело запроса, заголовки не учитываются.

Если true , то известно полное количество байт для пересылки, и оно хранится в свойстве total .

Общее количество байт для пересылки, если известно.

А может ли оно быть неизвестно?

• При отправке на сервер браузер всегда знает полный размер пересылаемых данных, так что total всегда содержит конкретное количество байт, а значение lengthComputable всегда будет true .
• При скачивании данных – обычно сервер в начале сообщает их общее количество в HTTP-заголовке Content-Length . Но он может и не делать этого, например если сам не знает, сколько данных будет или если генерирует их динамически. Тогда total будет равно 0 . А чтобы отличить нулевой размер данных от неизвестного – как раз служит lengthComputable , которое в данном случае равно false .

Ещё особенности, которые необходимо учитывать при использовании onprogress :

• Событие происходит при каждом полученном/отправленном байте, но не чаще чем раз в 50 мс. Это обозначено в спецификации progress notifications.
• В процессе получения данных, ещё до их полной передачи, доступен xhr.responseText , но он не обязательно содержит корректную строку. Можно до окончания запроса заглянуть в него и прочитать текущие полученные данные. Важно, что при пересылке строки в кодировке UTF-8 кириллические символы, как, впрочем, и многие другие, кодируются 2 байтами. Возможно, что в конце одного пакета данных окажется первая половинка символа, а в начале следующего – вторая. Поэтому полагаться на то, что до окончания запроса в responseText находится корректная строка нельзя. Она может быть обрезана посередине символа. Исключение – заведомо однобайтные символы, например цифры или латиница.
• Сработавшее событие xhr.upload.onprogress не гарантирует, что данные дошли. Событие xhr.upload.onprogress срабатывает, когда данные отправлены браузером. Но оно не гарантирует, что сервер получил, обработал и записал данные на диск. Он говорит лишь о самом факте отправки. Поэтому прогресс-индикатор, получаемый при его помощи, носит приблизительный и оптимистичный характер.

Файлы и формы

Выше мы использовали xhr.send(file) для передачи файла непосредственно в теле запроса.

При этом посылается только содержимое файла.

Если нужно дополнительно передать имя файла или что-то ещё – это можно удобно сделать через форму, при помощи объекта FormData:

Создадим форму formData и прибавим к ней поле с файлом file и именем «myfile» :

var formData = new FormData(); formData.append("myfile", file); xhr.send(formData);

Данные будут отправлены в кодировке multipart/form-data . Серверный фреймворк увидит это как обычную форму с файлом, практически все серверные технологии имеют их встроенную поддержку. Индикация прогресса реализуется точно так же.

Источник

10 Best Loading Spinner Plugins In JavaScript And Pure CSS (2023 Update)

Loading spinner is an animated loading progress indicator that can be used to indicate or visualize the current loading status (progress) while loading asynchronous content into the web app.

The Best Loading Spinner

This is a fresh, hand-picked list of 10 best loading spinner JavaScript plugins and CSS packs to help you quickly insert a custom loading indicator into your web project. I hope you like it.

Originally Published Jan 01 2018, updated Jan 12 2023

Table of contents:

jQuery Loading Spinner Plugins:

jQuery Plugin To Create Fullscreen Preloading Effects — fakeLoader.js

loadingoverlay.js is a simple, flexible jQuery plugin which shows a highly customizable loading overlay with custom spinners while loading some data within a specific container.

Simple Flexible Loading Overlay Plugin With jQuery — loadingoverlay.js

loadingoverlay.js is a simple, flexible jQuery plugin which shows a highly customizable loading overlay with custom spinners while loading some data within a specific container.

jQuery Plugin For Creating Loading Overlay with CSS3 Animations — waitMe

waitMe is a very lightweight (~1.55 kb minified) jQuery plugin for creating an Ajax loading overlay with loading text and animated loading spinner using CSS3 aniamtions.

jQuery Ajax Loading Overlay with Loading Text and Spinner Plugin

A simple and lightweight jQuery plugin that adds a loading overlay with loading text and loading spinner to a target element. Ideal for ajax loading overlay preventing any other action in the browser till the data gets loaded.

Facebook-like Content Placeholder Plugin — jQuery Skeleton Loader

A jQuery loader plugin used to display Facebook-style animated content placeholders while loading your page’s content via AJAX requests.

Vanilla JS Loading Spinner Plugins:

Minimal SVG Loading Spinner In Pure JS – LoadingSpinner.js

A vanilla JavaScript plugin to show a basic, animated, SVG-based loading spinner on the screen when needed.

Beautiful Loading Spinners & Progress Bars – Loading-Visualization

A JavaScript/CSS library to visualizing loading status in animated, customizable loading spinners & progress bars.

Pure CSS Loading Spinner Packs:

SpinKit

Simple loading spinners animated with CSS. SpinKit only uses (transform and opacity) CSS animations to create smooth and easily customizable animations.

Loaders.css

Delightful, performance-focused pure css loading animations.

Single Element CSS Spinners

A collection of loading spinners animated with CSS.

Conclusion:

Seeking more jQuery plugins or JavaScript libraries to create awesome Loading Spinner/Indicator on the web & mobile? See jQuery Loading Spinner and JavaScript/CSS Loading Spinner sections for more details.

See also:

Источник