ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Загрузка картинок при прокрутке страницы

Загрузка картинок при прокрутке страницы

Загрузка картинок при прокрутке страницы
В этой статье узнаете, как создать загрузку изображений, которая происходит при прокрутке с использованием JavaScript на страницы или галерей. И здесь нужно понимать, что безусловно важным элементом работы тематических сайтов является скорость загрузки, которая станет появляться у пользователя в браузере. Где также важно интернет соединение, но и в большей частью от построения скрипта. Так как считать будем один вариант, чем быстрее, тем лучше будет для всех кто открыл страницу.

А вообще разберем создание функцию отложенной загрузки картинок или изображений при помощи JavaScript. Вероятно вам уже знакома эта функция, что проматываем страницу вниз, где плавно появляется материал. Но только здесь будет конкретное изображение, которое вы изначально разместите. По своей функциональности, это метод направлен на предоставление онлайн-контента на сайте. Загрузка идет на те изображения, что находятся в области отображения, а остальные появятся при прокрутке.

Как все происходит после установки:

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

Проверено на адаптивность на мобильных аппаратов, что корректно выводит:

Адаптивная ипоявление изображение при прокрутки страницы

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

Установка:

HTML

Код
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Плавная загрузка изображений</title>
  <link  
</head>
<body>
<h1>Загрузка изображений с прокруткой</h1>

<div class="basukivaen">
  <div class="senivaya_zagruzka">
  <img data-src="http://zornet.ru/_fr/79/s5179181.jpg" width="400" height="500" alt="Первый снимок"/>
  </div>
  <div class="senivaya_zagruzka">
  <img data-src="http://zornet.ru/_fr/79/s0298453.jpg" width="400" height="500" alt="Второй кадр"/>
  </div>
  <div class="senivaya_zagruzka">
  <img data-src="http://zornet.ru/_fr/85/s0887226.jpg" width="400" height="500" alt="Здесь текст"/>
  </div>
  <div class="senivaya_zagruzka">
  <img data-src="http://zornet.ru/_fr/85/s5046193.jpg" width="400" height="500" alt="Еще описание"/>
  </div>
  <div class="senivaya_zagruzka">
  <img data-src="http://zornet.ru/_fr/85/s2278598.jpg" width="400" height="500" alt="Ключевое слово"/>
</div>
  <div class="senivaya_zagruzka">
  <img data-src="http://zornet.ru/_fr/85/s4000705.jpg" width="400" height="500" alt="Текс под картинку"/>
</div>
  <div class="senivaya_zagruzka">
  <img data-src="https://source.unsplash.com/collection/3694365/800x600/?sig=5" width="400" height="500" alt="Тематическое название"/>
</div>
  <div class="senivaya_zagruzka">
  <img data-src="http://zornet.ru/_fr/85/s3328818.jpg" width="400" height="500" alt="Название картинки"/>
</div>
  <div class="senivaya_zagruzka">
  <img data-src="http://zornet.ru/_fr/85/s1440679.jpg" width="400" height="500" alt="Изображение"/>
</div>
  <div class="senivaya_zagruzka">
  <img data-src="http://zornet.ru/_fr/79/s9093693.jpg" width="400" height="500" alt="Изображение​ под номером 1"/>
</div>
  <div class="senivaya_zagruzka">
  <img data-src="http://zornet.ru/_fr/79/s2799566.jpg" width="400" height="500" alt="Изображение​ под номером 1"/>
</div>
  <div class="senivaya_zagruzka">
  <img data-src="http://zornet.ru/_fr/79/s2146073.jpg" width="400" height="500" alt="Название картинки 1"/>
</div>
  <div class="senivaya_zagruzka">
  <img data-src="http://zornet.ru/_fr/79/s6675897.jpg" width="400" height="500" alt="Название картинки 1"/>
</div>
  <div class="senivaya_zagruzka">
  <img data-src="http://zornet.ru/_fr/79/s7476749.jpg" width="400" height="500" alt="Ключевое слово 1"/>
</div>
  <div class="senivaya_zagruzka">
  <img data-src="http://zornet.ru/_fr/79/s6400343.jpg" width="400" height="500" alt="Ключевое слово 2"/>
</div>
  <div class="senivaya_zagruzka">
  <img data-src="http://zornet.ru/_fr/79/s7748797.jpg" width="400" height="500" alt="Ключевое слово 3"/>
</div>
  <div class="senivaya_zagruzka">
  <img data-src="http://zornet.ru/_fr/79/s6835763.jpg" width="400" height="500" alt="ZorNet.Ru — сайт для вебмастера"/>
</div>
  <div class="senivaya_zagruzka">
  <img data-src="http://zornet.ru/_fr/79/s6040899.jpg" width="400" height="500" alt="Скрипты для сайта"/>
</div>
  <div class="senivaya_zagruzka">
  <img data-src="http://zornet.ru/_fr/79/s4181401.jpg" width="400" height="500" alt="Шаблоны для сайта"/>
</div>
  <div class="senivaya_zagruzka">
  <img data-src="http://zornet.ru/_fr/79/s2196558.jpg" width="400" height="500" alt="Ключевая фраза"/>
</div>  
</div>
</body>
</html>

CSS

Код
* {
  box-sizing: border-box;
}

h1 {
  font-family: 'Squada One', cursive;
  text-align: center;
  font-weight: 100;
  color: #464242;
  font-size: 47px;
  margin: 100px 0 0;
}

.basukivaen {
  display: flex;
  flex-wrap: wrap;
  max-width: 975px;
  margin: 100px auto;
  box-shadow: 0 0 50px #2d2b2b;
}

.senivaya_zagruzka {
  width: 50%;
}

.senivaya_zagruzka > img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

img {
  opacity: 1;
  transition: opacity 1s;
}

img[data-src] {
  opacity: 0;
}

JS

Код
(function() {
  var elements = document.querySelectorAll('img[data-src]');
  var index = 0;
  var lazyLoad = function() {  
  if(index >= elements.length) return;
  var item = elements[index];  
  if((this.scrollY + this.innerHeight) > item.offsetTop) {  
  var src = item.getAttribute("data-src");
  item.src = src;
  item.addEventListener('load', function() {
  item.removeAttribute('data-src');  
  });  
  index++;
  lazyLoad();
  }
  };
  var init = function() {
  window.addEventListener('scroll', lazyLoad);
  lazyLoad();
  };
  return init();
})();

Теперь вам понятно, как можно создать функционал отложенной загрузкой изображений при прокрутке с использованием JavaScript, где также задействованы HTML и CSS для создания макета и JS для функций загрузки.

PS - чтоб создать demo страницу и автоматически проверить материал по его работе, то заметил, что реально все картинки должны по высоте быть аналогичны.

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

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

Видео обзор:



Также использовали jQuery или любую другую библиотеку JS, где можете использовать этот функционал на своем сайте, чем многих удивите оригинальным появлением изображения.
20 Февраля 2020 Просмотров: 2693 Комментариев: (0)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 0
Войдите:
avatar