Предварительный загрузчик — одна из важных особенностей удобного интерфейса. Это указывает на то, что содержимое все еще загружается с анимированным значком или текстом. В этом уроке я покажу вам, как создать предварительный загрузчик на HTML-странице.
Шаг 1:
Внутри тега body поместите этот тег div с классом «preloader».
‹div class="preloader"›‹/div›
Шаг 2:
Добавьте следующие стили в свой файл CSS
.preloader{
положение: абсолютное;
сверху: 0;
слева: 0;
дно:0;
справа: 0;
ширина: 100%;
высота: 100вх;
z-индекс: 99999999;
фоновое изображение: URL(‘../img/Ripple-loader.gif’); /* путь к файлу gif-иконки */
фоновый повтор: без повтора;
цвет фона: #FFF;
фоновая позиция: центр
}
Примечание: добавьте дополнительные стили CSS для тега body с идентификатором «stop-scrolling», чтобы скрыть полосу прокрутки.
#stop-scrolling{
высота: 100% !важно;
переполнение: скрыто !важно;
}
Шаг 3.
В ваш файл JS добавьте следующие коды JavaScript
функция предварительной загрузкиFadeOutInit(){
$(‘.preloader’).fadeOut(‘медленно’);
$('тело').attr('id','');
}
// функция загрузки окна
jQuery(окно).on(‘загрузить’, функция () {
(функция ($) {
предварительный загрузчикFadeOutInit();
})(jQuery);
});
Функция с именем «preloaderFadeOutInit()» содержит весь наш код и вызывает эту функцию при загрузке DOM.
Внутри функции preloaderFadeOutInit():
Метод jquery, fadeOut(), медленно удаляет наш прелоадер div(.preloader).
Затем мы также удаляем значение атрибута id из тела (‹body›), чтобы полоса прокрутки появлялась на странице после исчезновения загрузчика.
Надеюсь, вы нашли это полезным
Автор:
Садик Гарба, полноценный веб-разработчик с 4-летним опытом веб-разработки.
