0
51
2019-01-16

ELEMENTOR - Отложенная загрузка фонового изображения (Lazy Load Background Image)

Реализация Lezy Load чтобы заставить фоновые изображения установленные в фон блоков или секций плагина ELEMENTOR “лениво” загружаться и не блокировать загрузку основных элементов страницы во время открытия сайта. Именно на поиск и решение данного вопроса я потратил большую часть этой ночи. И все таки я справился.
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

И так как же все таки мне удалось загрузить изображения в фоновом режиме, реализовав их загрузку лениво (“Lazy Load” )? В начале пройдусь по инструкции которая поможет Вам понять сам принцип работы моего решения.

Инструкция для реализации отложенной загрузки (“Lazy Load”) фоновым изображениям, блоков и секций ELEMENOR

Для отложенной загрузки фона был написан специальный jQuery скрипт который Вы увидите ниже. Чтобы данный скрипт реализовывал лейзилоад фоновым изображениям, необходимо для секции или блока присвоить класс:

.lazy-background

Добавляем класс lazy-background к секции ELEMENTOR

Elementor - добавление класса

все остальные настройки которые будут происходить для ELEMENTOR будут применять все так же на вкладке “Расширенные”.

Добавляем CSS стили для бэкграунда секции

Чтобы бэкграунд который “лениво” загрузился отобразился во всю ширину и высоту блока или секции, для него необходимо указать отдельные CSS стили. Пример того как это можно осуществить прямо в секции ELEMENTOR:

lementor - добавление css стилей

Здесь обратите внимание на то что я указал идентификатор “#OO2”, то есть мы можем в стилях указывать уникальные настройки для отображения бэкграунда. Основной пример стилей которыми я решил пользоваться:

#OO2 .lazy-bg { 
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: -1;
     background-attachment: fixed;
 }

Подготовка изображений фона для отложенной загрузки

Теперь мы переходим более интересной части всей “процедуры”. Я решил немного “заморочиться” и сделал решение таким чтобы фоновое изображение соответствовало размерами ширины экрана на котором просматривается сайт. То есть чем ширина экрана шире, тем подгружаемое изображение фона будет больше по своему размеру. У меня получилось 6 изображений. Для того что бы Вам было максимально удобно, советую использовать имена которые я указал в примере (хотя назначить свои имена вам не кто не запрещает).

Список изображений для Lazy Load фона

Отобразится при ширине экрана от 1701px

Background-min-width-1701px.jpg

Отобразится при ширине экрана до 1700px

Background-max-width-1700px.jpg

Отобразится при ширине экрана до 1200px

Background-max-width-1200px.jpg

Отобразится при ширине экрана до 1024px

Background-max-width-1024px.jpg

Отобразится при ширине экрана до 768px

Background-max-width-768px.jpg

Отобразится при ширине экрана до 400px

Background-max-width-400px.jpg

Добавляем атрибуты для секции

Теперь когда у нас изображения для фона подготовлены и загружены на сайт, переходим к моменту который поможет скрипту данными изображениями “воспользоваться”. А именно добавляем атрибуты для секции или блока:

data-bg-min-1701|/wp-content/uploads/2019/01/Background-min-width-1701px.jpg
data-bg-max-1700|/wp-content/uploads/2019/01/Background-max-width-1700px.jpg
data-bg-max-1200|/wp-content/uploads/2019/01/Background-max-width-1200px.jpg
data-bg-max-1024|/wp-content/uploads/2019/01/Background-max-width-1024px.jpg
data-bg-max-768|/wp-content/uploads/2019/01/Background-max-width-768px.jpg
data-bg-max-400|/wp-content/uploads/2019/01/Background-max-width-400px.jpg

Вставляем атрибуты для ELEMENTOR как указано ниже

lementor - добавление css стилей

jQuery код для отложенной загрузки фонового изображения ELEMENTOR

Теперь добавляем скрипт ниже в файл скриптов своей темы.

jQuery(document).ready(function($){

// SDStudio - ELEMENTOR Lazy Load Background Image
// ====================================

var $window = $(window),
    lazyBgArr = [];

$window.on('load resize scroll', function(){    
  for (i = 0; i < lazyBgArr.length; i++) {
      var func = lazyBgArr[i];
      if (func !== undefined){ func(); }
  }
});

function lazyBg( strEl, intPos ){

  return function(){

    var intCheckVal = (($window.scrollTop() + $window.height()) + 100);
    if ( intCheckVal > strEl.offset().top) {  

           //   ===============================================
    // min-width: 1701px
    if (window.matchMedia("(min-width: 1701px)").matches) { 
//         var data_bg = "data-bg-min-1701";
           var data_bg = "data-bg-max-1700";
        console.log("Ширина экрана min-width: 1701px"); 
    } 
    // max-width: 1700px
     else if (window.matchMedia("(min-width: 1201px) and (max-width: 1700px)").matches) { 
        var data_bg = "data-bg-max-1700";
        console.log("Ширина экрана max-width: 1700px");
    }
    // max-width: 1200px
      else if (window.matchMedia("(min-width: 1025px) and (max-width: 1200px)").matches) { 
        var data_bg = "data-bg-max-1200";
        console.log("Ширина экрана max-width: 1200px");
    } 
    // max-width: 1024px
      else if (window.matchMedia("(min-width: 769px) and (max-width: 1024px)").matches) { 
        var data_bg = "data-bg-max-1024";
        console.log("Ширина экрана max-width: 1024px");
    } 
      // max-width: 768px
      else if (window.matchMedia("(min-width: 401px) and (max-width: 768px)").matches) {
        var data_bg = "data-bg-max-768";
        console.log("Ширина экрана max-width: 768px");
    } 
      // max-width: 400px
      else if (window.matchMedia("(max-width: 400px)").matches) {
        var data_bg = "data-bg-max-400";
        console.log("Ширина экрана max-width: 400px");
    } 

    //   else {
    //     var data_bg = "data-bg";
    //    // let src = node.getAttribute(data_background_image_url);
    //     console.log("Screen less than 500px");
    // }
//   ===============================================      
// });
//   ===============================================     
      var tmpImg = new Image(),strSrc = strEl.attr(data_bg);
//   ===============================================      

      tmpImg.src = strSrc;
      delete lazyBgArr[intPos];

      $(tmpImg).on('load', function(){
        strEl.append('<div class="lazy-bg" style="background-image: url(' + strSrc + ')">').css('opacity');
        strEl.addClass('loaded');

      });
        }
  };
}

$('.lazy-background').each(function(i){
  lazyBgArr.push( lazyBg($(this), i) );                         
});

// ====================================
});

Отложенная загрузка фона на примере обычной верстки в CodePen

Как работает отложенная загрузка фона в живую можно посмотреть ниже:

Готовый пак изображений+JS+CSS

Чтобы Вам было максимально удобно я подготовил архив с изображениями для фона + используемый скрипт и стили. Вы можете все это добро загрузить по ссылке ниже.

Итог

Вот собственно и все, теперь при открытии страницы фоновые изображения не как не будут влиять на скорость загрузки. Фоновые изображения должны подгружаться по мере скролла пользователем страницы.