Привет всем.
Кто ставил заглушку на яндекс карту, заглушка картинка, при наведении мыши, идет подгрузка яндек карт.
Я думаю поняли для чего это делают, чтобы сайт грузился быстрее.
Вывод
<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
}
}
Вопрос про картинку, у меня блок адаптивный, надо чтоб картинка на 100% показывалась.
А если ставить в css 100%, не показывается вообще.
Отвечающий за размер отображения картинки.
#map-yandex {
position: relative;
z-index: 7;
width: 100%;
height: 100%;
cursor: pointer;
background-color: transparent
}
Я уже и так делал
min-height: 100%; и не видно, если
PX ставить то видно, но
px не пойдет, ибо там адаптивный блок.
Простой
