Lazy Load на Вашем сайта (отложенная загрузка картинок). Часть 1. | Блог веб-разработчика MaxGraph

Lazy Load на Вашем сайта (отложенная загрузка картинок). Часть 1.

Привет! Сегодня поговорим об отложенной загрузке картинок на сайте, или же "ленивой загрузке". Написал, что часть первая, так как возможно рассуждения об этом будут не один раз. А можем и один, тогда эта часть станет последней =) В общем, поехали!

Lazy Load — ленивая загрузка контента. Это могут быть и картинки, и видео. И даже, возможно, что-то еще. Но чаще всего такое, конечно, используется в картинках. Разделю статью на две части — плагины и не плагины. Начнем с первых.

Плагины

Самый простой и неплохо работающий плагин — jQuery Lazy. Просто поставить и просто настроить. Работает как с Img, так и с background-image, смотря что Вам нужно. Лично я довольно редко его использовал, т.к. зачастую использовал решения без плагинов.

 

Если Вы используете слайдеры с большим кол-вом картинок\слайдов — стоит использовать встроенные возможности слайдеров по ленивой загрузке. Я использую в последнее время плагин Swiper и считаю его лучший на данный момент решением среди слайдеров. Тем более, что он, если не ошибаюсь, используется как основной плагин для системы OpenCart. О нем я хочу еще рассказать в отдельной статье, где расскажу, чем он лучше того же Slick slider. Но об этом позже)

Пример lazy load в Swiper:

1
2
3
<div data-background="path/to/picture-3.jpg" class="swiper-slide swiper-lazy">
  <div class="swiper-lazy-preloader"></div>
</div>
<div data-background="path/to/picture-3.jpg" class="swiper-slide swiper-lazy">
  <div class="swiper-lazy-preloader"></div>
</div>
1
2
3
4
5
var mySwiper = new Swiper('.swiper-container', {
  lazy: {
    loadPrevNext: true,
  },
});
var mySwiper = new Swiper('.swiper-container', {
  lazy: {
    loadPrevNext: true,
  },
});

Довольно просто, картинка становится фоном и всем хорошо.

Lazy Load без плагина (или его аналоги)

Одно из решений я уже показывал:

1
<imgg src="" data-src="/img.jpg" alt="">
<imgg src="" data-src="/img.jpg" alt="">
1
2
3
4
$('img').each(function(){
  let src = $(this).attr('data-src');
  $(this).attr('src', src);
});
$('img').each(function(){
  let src = $(this).attr('data-src');
  $(this).attr('src', src);
});

По сути, тут мы просто обманываем браузер при загрузке страницы, все картинки грузятся после загрузки основного контента. Кстати, тут полезно оставить на первом экране сайта картинки в нормальном виде, а вот дальше уже сделать такую «загрузку». И да, написал imgg, ибо мой блог цеплял тег img почему-то. Конечно, на самом деле там Img =)

 

Такое можно делать и для видео:

1
<video src="" data-src="123.mp4" muted>
<video src="" data-src="123.mp4" muted>
1
2
3
4
$('video').each(function(){
  let src = $(this).attr('data-src');
  $(this).attr('src', src);
});
$('video').each(function(){
  let src = $(this).attr('data-src');
  $(this).attr('src', src);
});

 

Еще одно решение — это делать lazy load по скроллу.

1
2
3
4
5
6
7
8
9
<div class="main-wrapper">
  <div class="case-section" data-src="https://www.imgworlds.com/wp-content/uploads/2015/12/generic.jpg"></div>
  <div class="case-section" data-src="https://babeltechreviews.com/wp-content/uploads/2018/07/rendition1.img_.jpg"></div>
  <div class="case-section" data-src="https://babeltechreviews.com/wp-content/uploads/2018/07/rendition1.img_.jpg"></div>
  <div class="case-section" data-src="https://www.imgworlds.com/wp-content/uploads/2015/12/generic.jpg"></div>
  <div class="case-section" data-src="https://www.imgworlds.com/wp-content/uploads/2015/11/image25.jpg"></div>
  <div class="case-section" data-src="https://babeltechreviews.com/wp-content/uploads/2018/07/rendition1.img_.jpg"></div>
  <div class="case-section" data-src="https://www.imgworlds.com/wp-content/uploads/2015/12/generic.jpg"></div>
</div>
<div class="main-wrapper">
  <div class="case-section" data-src="https://www.imgworlds.com/wp-content/uploads/2015/12/generic.jpg"></div>
  <div class="case-section" data-src="https://babeltechreviews.com/wp-content/uploads/2018/07/rendition1.img_.jpg"></div>
  <div class="case-section" data-src="https://babeltechreviews.com/wp-content/uploads/2018/07/rendition1.img_.jpg"></div>
  <div class="case-section" data-src="https://www.imgworlds.com/wp-content/uploads/2015/12/generic.jpg"></div>
  <div class="case-section" data-src="https://www.imgworlds.com/wp-content/uploads/2015/11/image25.jpg"></div>
  <div class="case-section" data-src="https://babeltechreviews.com/wp-content/uploads/2018/07/rendition1.img_.jpg"></div>
  <div class="case-section" data-src="https://www.imgworlds.com/wp-content/uploads/2015/12/generic.jpg"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
let arr = [];
 
function pushArr() {
  $('.case-section').each(function(){
    let attr = $(this).attr('data-src');
    arr.push(attr); 
  });
}
pushArr()
 
 
var ll = $('.case-section');
var lh = []
var wscroll = 0;
var wh = $(window).height();
 
$('.case-section').each(function(){
  var x = $(this).offset().top;
  lh.push(x);
});
 
function lazy() {
  wscroll = $(window).scrollTop();
  $('.case-section').eq(0).css('background-image','url('+ arr[0] +')');
  $('.case-section').eq(1).css('background-image','url('+ arr[1] +')');
  for(i = 0; i < lh.length; i++){
    if(lh[i] <= wscroll + (wh - 200)){
      $('.case-section').eq(i).css('background-image','url('+ arr[i] +')');
      $('.case-section').eq(i).next().css('background-image','url('+ arr[i+1] +')');
      $('.case-section').eq(i).next().next().css('background-image','url('+ arr[i+2] +')');
    };
  };
};
 
lazy();
 
$(window).on('scroll',function(){
  lazy();
});
let arr = [];

function pushArr() {
  $('.case-section').each(function(){
    let attr = $(this).attr('data-src');
    arr.push(attr); 
  });
}
pushArr()


var ll = $('.case-section');
var lh = []
var wscroll = 0;
var wh = $(window).height();

$('.case-section').each(function(){
  var x = $(this).offset().top;
  lh.push(x);
});

function lazy() {
  wscroll = $(window).scrollTop();
  $('.case-section').eq(0).css('background-image','url('+ arr[0] +')');
  $('.case-section').eq(1).css('background-image','url('+ arr[1] +')');
  for(i = 0; i < lh.length; i++){
    if(lh[i] <= wscroll + (wh - 200)){
      $('.case-section').eq(i).css('background-image','url('+ arr[i] +')');
      $('.case-section').eq(i).next().css('background-image','url('+ arr[i+1] +')');
      $('.case-section').eq(i).next().next().css('background-image','url('+ arr[i+2] +')');
    };
  };
};

lazy();

$(window).on('scroll',function(){
  lazy();
});

Такое решение я использовал тут. По скроллу загружается следующая картинка и две после нее. А поскольку данная страница полностью из картинок - это удобно.

Пен:

 

Думаю, на этом пока все. Есть еще пару мелочей, но оставим их на вторую часть.

 

Успехов Вам в применении этого материала =)

Метки: , , ,

Понравилось? Оцени!
12345 (1 оценок, среднее: 5,00 из 5)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *