ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Загрузчик изображений на CSS и Javascript

Загрузчик изображений на CSS и Javascript

В данном материале представлен материал, это как добавить предварительный загрузчик на сайт при помощи CSS, HTML и Javascript, сем сделать оригинальный вид. Если быть точнее, то здесь мы создадим интернет ресурс с анимацией предварительного загрузчика. Как многие вебмастера говорят, что данные мини-усилия необходимы для улучшения функциональности веб-сайта. И для того, чтобы добавить интерактивные компоненты внутри интернет ресурса, то нам необходимо добавим данную анимацию загрузки, которую можно по стилистике настроить при взаимодействие HTML и CSS. Чтоб было понятно для вас, то данная анимация прелоадера используется, это только в том случаи, когда происходит долгая загрузка страницы или сайта.

Также есть есть свое преимущество, которое задействована в использование предварительных загрузчиков на страницах сайта, на мой взгляд. По мне, то в чем то даже нужное по своему функционалу. Так как мы не сразу преступаем к действию, а видим, что данный интернет портал не случайны по адресу страницы, так как не весь код еще не полностью загрузился. Предварительный загрузчик хорош тем, что сразу полностью закрывает страницу на сайте и аналогично исчезнет из поля зрения, как только браузер погрузил полностью код необходимой страницы.

Как можно понять, что данный загрузчик будет только задействован на изображениях, которые увеличиваются или просто много весят, и после этого мы увидим данный загрузчик, как он только исчезнет, так можно констатировать, что изображение полностью загружено.

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

Здесь добавлен предварительный загрузчик, где для начало создан класс div с именем progruzka, где указан в разделе тела HTML

Как добавить предварительный загрузчик на HTML + CSS

Установка:

HTML

Код

CSS

Код

*{
  margin:0;
  padding:0;
}
.progruzka{
  position:fixed;
  top:0;
  left:0;
  background:lightgray;
  height:100%;
  width:100%;
  display:flex;
  justify-content:center;
  align-items: center;
}
.progruzka img{
  height:100%;
  width:100%;
}
.evaporate{
  animation:vanish 5s forwards;
}
  @keyframes vanish {
  100%{
  opacity:0;
  visibility:hidden;
  }
  }

Код

let progruzka=document.querySelector('.progruzka');

window.addEventListener("load",vanish);

function vanish(){
progruzka.classList.add("evaporate")
}

Предзагрузка — это в основном веб-макет или контекст, который вы можете видеть во время загрузки вашей страницы. Как только страница загрузилась на сайте, то вид загрузчика исчезает, что при большой интернет соединение будет намного быстрей исчезать.

Видео данного загрузчика, и его работа:

Демонстрация

16 Мая 2023 Загрузок: 1 Просмотров: 679 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0