Эффект шоу:
1) При нажатии на загрузку моделирование выполняет асинхронную загрузку. Браузер заблокирован. Появляется план прогресса.
Идеи реализации:
1. Когда пользователь нажимает кнопку загрузки, чтобы выполнить асинхронный запрос. Нагрузка появляется, когда метод вызывается.
2. Как реализовать планку прогресса?
1) Добавьте новый Div в документ. Перезаписать браузер. Установите фон, будет выброшен с серым. z-index = 999. Пользователь не может изменить значение интерфейса при загрузке.
2) Добавьте динамический div в документ.
Реализация кода:
Main.html:
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="Loading.js" charset="utf-8"></script><link rel="stylesheet" href="Loading.css" media="screen" charset="utf-8"></head><body><button onclick = "showloading ()"> загрузить </button> </body> </html>
Загрузка.js:
Функция showloading () {var overdiv = document.createElement ("div"); var loaddiv = document.createElement ("div"); var wildDiv1 = document.createElement ("div"); var childdiv2 = document.createElement ("div"); document.createElement ("div"); overdiv.classlist.add ('over'); loadingdiv.classlist.add ('spinner'); ChildDiv1.classlist.Add ('Bounce1') ChildDiv2.classlist.Add ('bounce2') childDiv3 adingdiv.appendchild (ChildDiv2); LoadingDiv.AppendChild (ChildDiv3); document.body.appendchild (Overdiv); document.body.appendchild (loaddiv) settimeout (function () {document.body.removechild (Overdiv); Document.Body.RemoveChild (LoadingDiv)}, 5000);}Загрузка.css
.spinner {width: 150px; текстовый Align: Center; слева: 50%; Верх: 50%; Положение: абсолют; z-Index: 1000;}. над {ширина: 100%; высота: 100%; z-Index: 998; фоновый цвет: серо; 30px; фоновый цвет: #67CF22; граница-радий: 100%; дисплей: встроенный блок; -webkit-animation: BounceDelay 1.4s Infinite Easy-in-Out; анимация: Bouncedelay 1.4s Infinite Easy-in-Out;/ * Предотвращение первого кадры после того, как анимация */-анимация-Fill-Fill-Fill-MODE; ByTy-MODE-MODE; .bounce1 {-webkit-animation-delay: -0,32S; анимация-delay: -0,32S;}. Spinner .bounce2 {-webkit-animation-delay: -0,16S; анимация-delay: -0.16s;}@-webt-keyframe bouncedelay {0%, 100%, 100%, 100%, 100%, 100%, 100%, 100%, 100%, 100%, 100%, 100%, 00%{{{}@webt-keyframes -Webkit-transform: Scale (0,0)} 40% {-webkit-transform: Scale (1,0)}}@Keyframes BounceDelay {0%, 80%, 100% {Transform: Scale (0.0);-Webkit-Transform: Scale (0,0);} 40% {Transform: Scale:-1);Суммировать:
1. Метод может быть поднят. Повторно ослабляет запрос Ajax один раз. Реализуйте метод автоматического бара при вызове запроса AJAX.
2. Если он угловой, угловой предоставляет методы для мониторинга HTTP -вызовов. Просто вызовите метод панели прогресса при мониторинге запросов на выполнение HTTP. Не нужно вызовать метод панели хода выполнения каждый раз, когда вы выполняете HTTP -вызовы и контролируют запросы на выполнение HTTP. Не нужно сами вызывать метод панели хода каждую работу каждый раз, когда вы выполняете HTTP.
Вышеуказанный контент связан с асинхронной панелью прогресса в асинхронной загрузке JS, представленной вам редактором. Я надеюсь, что это будет полезно для всех!