Lazy-load или отложенная загрузка для Яндекс карт
Поисковики очень любят, когда страницы загружаются быстро.
Поэтому Яндекс.Карты имеет смысл показывать лишь в том случае, когда пользователь докрутил страницу до того места, где сии карты и должны быть. Особенно это важно при создании лендингов.
Метод простой.
1. Создаём div на нашей странице, присваиваем ему id и описываем свойства CSS. Например:
<div id="YaMaps"></div>
2. Прописываем javascript (jQuery):
Очевидно, что 700 -- это расстояние в пикселях от низа окна браузера до текущей позиции скролла, а script.src -- это ссылка на карту, выдаваемая в конструкторе Яндекс.Карт
Поэтому Яндекс.Карты имеет смысл показывать лишь в том случае, когда пользователь докрутил страницу до того места, где сии карты и должны быть. Особенно это важно при создании лендингов.
Метод простой.
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 -- это ссылка на карту, выдаваемая в конструкторе Яндекс.Карт
Легко сделаем вам сайт