(Когда веб -страница загружена, иногда контент слишком много, и она была загружена и ожидала. В настоящее время веб -страница показывает, что белые ничего не отображают. Опыт пользователя довольно плохая. Поэтому форма полосы отображается для пользователей.
Общие способы заключаются в следующем:
1. Прогресс -панель таймера (подделка) <script type = text/javascript> $ (function () {var загрузка = '<div class = загрузка> <div class = pic> </div> </div>'; $ (body). g); function () {$ (. Загрузка) 2. Настоящий контент приобретения, реализуйте панель прогресса загрузкиЧтобы загрузить панель хода прогресса в соответствии с реальным контентом, введены два точка знаний:
Document.onreadyStateChange страница Страницы загрузки События События
Document.ReadyState возвращает статус текущего документа
1. Неинициализованный -еще не начал загружать
2. Загрузка -
3. Интерактивный -загруженный, документ и пользователь могут начать взаимодействовать
4. Полная -загрузка полна
2.1. Document.onreadyStateChange = function () {if (documeTed.readyState == завершено) {$ (. Загрузка) .fadeout ();}} 2.2.Рекомендуемый веб -сайт: https://preloaders.net/ Этот веб -сайт имеет различные небольшие анимации, которые указывают на загрузку загрузки
http://autoprefixer.github.io/, чтобы добавить префиксы в CSS Online
https://loading.io/ Прогрессивная маленькая анимация
2.3: Прогресс расположен в голове, как показано ниже:Примечание. Это реализация не является реальным отображением прогресса загрузки, но использует: принцип выполнения кода сверху донизу
В разных позициях кода измените ширину строк.
Как показано ниже:
2.4 Получите панель прогресса для загрузки данных в режиме реального времениСоздание объектов изображения: имя объекта изображения = новое изображение ();
Использование: онлайн -событие
Примечание. Атрибут SRC должен быть записан за Onload, в противном случае программа допустит ошибку в IE
Приведенное выше содержимое этой статьи.