Loading a Yandex map on hover, plus a stub, a preview, is there a problem, how to solve it?

• 0
  Hello everyone.
  
  Who put a stub on the Yandex card, stub a picture, when you hover the mouse, the Yandex maps are loaded.
  I think they understood what they are doing to make the site load faster.
  
  Output
  

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

  
  
  Js
  

  //Переменная для включения/отключения индикатора загрузки
    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: [56.026146, 92.905806], // координаты центра на карте
      zoom: 16, // коэффициент приближения карты
      controls: ['zoomControl', 'fullscreenControl'] // выбираем только те функции, которые необходимы при использовании
    });
    var myPlacemarkTemp = new ymaps.GeoObject({
      geometry: {
        type: "Point",
        coordinates: [56.026146, 92.905806] // координаты, где будет размещаться флажок на карте
      }
    });
    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();
  });

  
  
  Css
  

  .ymap-container {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: url(/media/img/map.jpg) #fafafb no-repeat;
    background-position: center center;
    background-size: cover
  }
  #map-yandex {
    position: relative;
    z-index: 7;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-color: transparent
  }
  .loader {
    position: absolute;
    z-index: 15;
    top: -100%;
    left: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #000;
    -webkit-transition: opacity .7s ease;
    transition: opacity .7s ease;
    opacity: 0;
    background-color: rgba(0, 0, 0, .55)
  }
  .loader:after,
  .loader:before {
    -webkit-box-sizing: border-box;
    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 #fff;
    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
    }
  }

  
  
  The question is about the picture, I have an adaptive block, I need the picture to be shown 100%.
  And if you set 100% in css, it is not shown at all.
  
  Responsible for the image display size.
  

  #map-yandex {
    position: relative;
    z-index: 7;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-color: transparent
  }

  
  
  I've already done this min-height: 100% ; and it is not visible, if PX is set then it is visible, but px will not work, because there is an adaptive block.

  JavaScript Caroline Pena, May 26, 2019

---

1 Answers
• 0
  solved the problem:
  
  
  
  

  .ymap-container {
  
    position: relative;
  
    overflow: hidden;
  
    cursor: pointer;
  
    background: url(/media/img/map.jpg) #fafafb no-repeat;
  
    background-position: center center;
  
    background-size: cover;
  
      width: 100%;
  
    height: 100%;
  
  }

  Anonymous

---