Оптимизация сайта: оптимизация Яндекс Карты.

В прошлых записях я показывал вам как производить загрузки видео с YouTube, только после клика по плееру. В данной записи мы будум использовать похожий метод, только в этот раз будем оптимизировать Яндекс карты.

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Для реализации этого нам понадобятся следующие файлы.

HTML

В HTML мы прописываем следующий код.

<div class="ymap-container">
     <div class="loader loader-default"></div>
     <div id="map-yandex"></div>
</div><!-- .ymap-container -->

Структура кода проста!

.ymap-container — обычный контейнер в котором будет находиться карта.
.loader .loader-default — этой индикатор загрузки, который будут появляться, когда пользователь наведет курсор на карту и пропадет когда карта полностью прогрузиться.
#map-yandex — здесь будет, динамически, появляться код карты, когда пользователь наведет на нее курсор.

CSS

Добавляем следующие стили.

.ymap-container {
  position: relative;

  margin: 3em 0 2em 0;

  overflow: hidden;

  cursor: pointer;

  background: url('../img/yandex-before-load.png') #ffffff no-repeat;
  background-position: center center;
  background-size: cover;
  box-shadow: 0 0 2em  0 rgba(0,0,0,.2);
}

#map-yandex {
  position: relative;
  z-index: 7;

  width: 100%;
  height: 20em;

  cursor: pointer;

  background-color: transparent;
}

/*Индикатор загрузки, который показывается до загрузки карты*/
.loader {
  position: absolute;
  z-index: 15;
  top: -100%;
  left: 0;

  box-sizing: border-box;
  width: 100%;
  height: 100%;

  overflow: hidden;

  color: #000000;

  transition: opacity .7s ease;

  opacity: 0;
  background-color: rgba(0,0,0,.55);
}
.loader:after,
.loader:before {
  box-sizing: border-box;
}
.loader.is-active {
  top: 0;

  opacity: 1;
}

.loader-default:after {
  position: absolute;
  top: calc(50% - 24px);
  left: calc(50% - 24px);

  width: 48px;
  height: 48px;

  content: '';
  -webkit-animation: rotation 1s linear infinite;
          animation: rotation 1s linear infinite;

  border: solid 8px #ffffff;
  border-left-color: transparent;
  border-radius: 50%;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}

@keyframes rotation {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}
@-webkit-keyframes blink {
  from {
    opacity: .5;
  }
  to {
    opacity: 1;
  }
}
@keyframes blink {
  from {
    opacity: .5;
  }
  to {
    opacity: 1;
  }
}

JavaScript (jQuery)

//Переменная для включения/отключения индикатора загрузки
var spinner = $('.ymap-container').children('.loader');
//Переменная для определения была ли хоть раз загружена Яндекс.Карта (чтобы избежать повторной загрузки при наведении)
var check_if_load = false;
//Необходимые переменные для того, чтобы задать координаты на Яндекс.Карте
var myMapTemp, myPlacemarkTemp;

//Функция создания карты сайта и затем вставки ее в блок с идентификатором "map-yandex"
function init () {
  var myMapTemp = new ymaps.Map("map-yandex", {
    center: [55.730138, 37.594238], // координаты центра на карте
    zoom: 7, // коэффициент приближения карты
    controls: ['zoomControl', 'fullscreenControl'] // выбираем только те функции, которые необходимы при использовании
  });
  var myPlacemarkTemp = new ymaps.GeoObject({
    geometry: {
        type: "Point",
        coordinates: [55.730138, 37.594238] // координаты, где будет размещаться флажок на карте
    }
  });
  myMapTemp.geoObjects.add(myPlacemarkTemp); // помещаем флажок на карту

  // Получаем первый экземпляр коллекции слоев, потом первый слой коллекции
  var layer = myMapTemp.layers.get(0).get(0);

  // Решение по callback-у для определния полной загрузки карты
  waitForTilesLoad(layer).then(function() {
    // Скрываем индикатор загрузки после полной загрузки карты
    spinner.removeClass('is-active');
  });
}

// Функция для определения полной загрузки карты (на самом деле проверяется загрузка тайлов) 
function waitForTilesLoad(layer) {
  return new ymaps.vow.Promise(function (resolve, reject) {
    var tc = getTileContainer(layer), readyAll = true;
    tc.tiles.each(function (tile, number) {
      if (!tile.isReady()) {
        readyAll = false;
      }
    });
    if (readyAll) {
      resolve();
    } else {
      tc.events.once("ready", function() {
        resolve();
      });
    }
  });
}

function getTileContainer(layer) {
  for (var k in layer) {
    if (layer.hasOwnProperty(k)) {
      if (
        layer[k] instanceof ymaps.layer.tileContainer.CanvasContainer
        || layer[k] instanceof ymaps.layer.tileContainer.DomContainer
      ) {
        return layer[k];
      }
    }
  }
  return null;
}

// Функция загрузки API Яндекс.Карт по требованию (в нашем случае при наведении)
function loadScript(url, callback){
  var script = document.createElement("script");

  if (script.readyState){  // IE
    script.onreadystatechange = function(){
      if (script.readyState == "loaded" ||
              script.readyState == "complete"){
        script.onreadystatechange = null;
        callback();
      }
    };
  } else {  // Другие браузеры
    script.onload = function(){
      callback();
    };
  }

  script.src = url;
  document.getElementsByTagName("head")[0].appendChild(script);
}

// Основная функция, которая проверяет когда мы навели на блок с классом "ymap-container"
var ymap = function() {
  $('.ymap-container').mouseenter(function(){
      if (!check_if_load) { // проверяем первый ли раз загружается Яндекс.Карта, если да, то загружаем
    
      // Чтобы не было повторной загрузки карты, мы изменяем значение переменной
        check_if_load = true; 
    
    // Показываем индикатор загрузки до тех пор, пока карта не загрузится
        spinner.addClass('is-active');

    // Загружаем API Яндекс.Карт
        loadScript("https://api-maps.yandex.ru/2.1/?lang=ru_RU&loadByRequire=1", function(){
           // Как только API Яндекс.Карт загрузились, сразу формируем карту и помещаем в блок с идентификатором "map-yandex"
           ymaps.load(init);
        });                
      }
    }
  );  
}

$(function() {

  //Запускаем основную функцию
  ymap();

});

На этом всё!

Если у вас есть вопросы, пишите их в нашей группе — https://vk.com/progtime 

Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи — https://vk.com/prog_time

В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.

Так же прокачивайте свои навыки на нашем канале — https://www.youtube.com/c/ProgTime