Екатеринбург

Lazy-load или отложенная загрузка для Яндекс карт

Поисковики очень любят, когда страницы загружаются быстро.
Поэтому Яндекс.Карты имеет смысл показывать лишь в том случае, когда пользователь докрутил страницу до того места, где сии карты и должны быть. Особенно это важно при создании лендингов.

Метод простой.

1. Создаём  div на нашей странице, присваиваем ему id и описываем свойства CSS. Например:
<div id="YaMaps"></div>


2. Прописываем javascript (jQuery):
YaMapsShown = false; 
$(document).ready(function (){

 $(window).scroll(function() {
    if (!YaMapsShown){
     if($(window).scrollTop() + $(window).height() > $(document).height() - 700) {      
      showYaMaps();
      YaMapsShown = true;
     }
    }
 });
 
});

function showYaMaps(){
 var script   = document.createElement("script");
 script.type  = "text/javascript";
 script.src   = "http://api-maps.yandex.ru/services/constructor/1.0/js/?sid=iaFxi9Mln1MO3U5voKWd_CC9HX1G5YO6&width=320&height=250";
 document.getElementById("YaMaps").appendChild(script);
}

3. Подставляем вместо числа 700 и script.src свои значения.
Очевидно, что 700 -- это расстояние в пикселях от низа окна браузера до текущей позиции скролла, а script.src -- это ссылка на карту, выдаваемая в конструкторе Яндекс.Карт

Легко сделаем вам сайт

Напишите нам - мы любим общаться!