У меня есть раздел на нашем сайте, который загружается довольно медленно, так как он делает некоторые интенсивные звонки.
Любая идея, как я могу divсказать что-то похожее на «загрузку», чтобы показать, пока страница готовится, а затем исчезает, когда все готово?
Я нуждался в этом, и после некоторого исследования я придумал это ( нужно jQuery ):
Сначала сразу после <body>тега добавьте это:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>Затем добавьте класс стиля для div и изображения в ваш CSS:
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}Затем добавьте этот javascript на свою страницу (желательно, в конце своей страницы, перед закрывающим </body>тегом, конечно):
<script>
$(window).load(function() {
$('#loading').hide();
});
</script>Наконец, отрегулируйте положение загрузочного изображения и background-colourзагрузочного div с классом стиля.
Это все, должно работать просто отлично. Но, конечно, вы должны иметь ajax-loader.gifгде-то. Халява здесь . (Щелкните правой кнопкой мыши> Сохранить изображение как ...)
$('#loading').hide();на каждой странице загрузки.Этот скрипт добавляет div, который покрывает все окно при загрузке страницы. Он покажет загрузочный счетчик только для CSS автоматически. Он будет ждать, пока окно (не документ) завершит загрузку, затем будет ждать дополнительные несколько секунд.
Код загрузчика CSS от https://projects.lukehaas.me/css-loaders
источник
$(window).on("load", handler)запускается, когда все объекты DOM заканчивают загрузку, включая изображения, сценарии, даже iframes. Если вы хотите дождаться загрузки определенного изображения, используйте$('#imageId').on("load", handler)$( "#loadingDiv" ).remove();на$( "#loadingDiv" ).hide();и добавить$( "#loadingDiv" ).show();раньшеsetTimeout(removeLoader, 2000);. Я удалил div, чтобы сделать страницу более легкой, но это исправление делает ее многоразовой.Изображение загрузки страницы с простейшим эффектом затухания, созданным в JS:
источник
У меня есть еще одно простое решение, которое отлично сработало для меня.
Прежде всего, создайте CSS с именем класса Lockon, который является прозрачным наложением вместе с загрузкой GIF, как показано ниже
Теперь нам нужно создать наш div с этим классом, который покрывает всю страницу как оверлей, когда страница загружается
Теперь нам нужно скрыть этот титульный экран всякий раз, когда страница готова, и чтобы мы могли ограничить пользователя от нажатия / запуска любого события, пока страница не будет готова
Выше решение будет хорошо, когда страница загружается.
Теперь вопрос заключается в том, что после загрузки страницы каждый раз, когда мы нажимаем кнопку или событие, которое займет много времени, мы должны показать это в событии клика клиента, как показано ниже.
Это означает, что когда мы нажимаем эту кнопку печати (что займет много времени, чтобы предоставить отчет), он покажет наш экран обложки с GIF, который дает
результат, и как только страница будет готова над окнами при загрузке, сработает функция, которая скрывает экран обложки после того, как экран полностью загружен.
источник
По умолчанию содержимое имеет,
display:noneа затем имеет обработчик события, который устанавливает егоdisplay:blockили подобное после его полной загрузки. Затем укажите div, для которого установлено значениеdisplay:block«Загрузка», и установите для негоdisplay:noneтот же обработчик событий, что и раньше.источник
Ну, это во многом зависит от того, как вы загружаете элементы, необходимые для «интенсивного вызова», я изначально думал, что вы выполняете эти загрузки через ajax. Если это так, то вы можете использовать опцию beforeSend и сделать ajax-вызов следующим образом:
РЕДАКТИРОВАТЬ Я вижу, в этом случае, вероятно, стоит использовать один из приведенных
'display:block'/'display:none'выше вариантов в сочетании с$(document).ready(...)из jQuery. В$(document).ready()функции ожидания для всей структуры документа должен быть загружен перед выполнением ( но не ждать , пока все средства массовой информации , чтобы нагрузка ). Вы бы сделали что-то вроде этого:источник
beforeSendиsuccessк каждому вызову ajax.Мой блог будет работать на 100 процентов.
источник
Создайте
<div>элемент, содержащий ваше сообщение о загрузке, дайте<div>идентификатор, а затем, когда ваш контент завершит загрузку, скройте<div>:... или простым JavaScript:
источник
$("#myElement").hide()проще на глазах?Вот jQuery, который я в конечном итоге использовал, который контролирует все запуск / остановку ajax, поэтому вам не нужно добавлять его к каждому вызову ajax:
CSS для загрузки контейнера и контента (в основном из ответа mehyaa), а также
hideкласса:HTML:
источник
На основе ответа @mehyaa, но гораздо короче:
HTML (сразу после
<body>):CSS:
Javascript (jQuery, так как я уже использую его):
источник
hide()элемента, чем дляremove()него, так что вы можете использовать его снова.Это будет синхронизировано с вызовом API. При запуске вызова API отображается загрузчик. Когда вызов API успешен, загрузчик удаляется. Это может использоваться для загрузки страницы или во время вызова API.
CSS
источник
для друпал в твоей теме файл custom_theme.theme
В файле html.html.twig после пропуска основной ссылки содержимого в теле
в файле CSS
источник