@a159cm

Как отложить загрузку яндекс карт?

Код отвечающий за вывод карты
<script src="https://api-maps.yandex.ru/2.1/?apikey=<?php echo $api_yandex ?>&lang=ru_RU"></script>
 <script>
ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {
            center: [<?php echo $center[0] ?>, <?php echo $center[1] ?>],
            zoom: <?php echo $zoom_map ?>,
			controls: ["zoomControl"]
        }, {
            searchControlProvider: 'yandex#search'
        }),
		
		
        /**
         * Создадим кластеризатор, вызвав функцию-конструктор.
         * Список всех опций доступен в документации.
         * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Clusterer.xml#constructor-summary
         */
            clusterer = new ymaps.Clusterer({
            /**
             * Через кластеризатор можно указать только стили кластеров,
             * стили для меток нужно назначать каждой метке отдельно.
             * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/option.presetStorage.xml
             */
            preset: 'islands#invertedRedClusterIcons',
            /**
             * Ставим true, если хотим кластеризовать только точки с одинаковыми координатами.
             */
            groupByCoordinates: false,
            /**
             * Опции кластеров указываем в кластеризаторе с префиксом "cluster".
             * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/ClusterPlacemark.xml
             */
            clusterDisableClickZoom: true,
            clusterHideIconOnBalloonOpen: false,
            geoObjectHideIconOnBalloonOpen: false
        }),
        /**
         * Функция возвращает объект, содержащий данные метки.
         * Поле данных clusterCaption будет отображено в списке геообъектов в балуне кластера.
         * Поле balloonContentBody - источник данных для контента балуна.
         * Оба поля поддерживают HTML-разметку.
         * Список полей данных, которые используют стандартные макеты содержимого иконки метки
         * и балуна геообъектов, можно посмотреть в документации.
         * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject.xml
         
            getPointData = function (index) {
            return {
                balloonContentHeader: '!',
                balloonContentBody: '',
                balloonContentFooter: '',
                clusterCaption: ''
            };
        },
        /**
         * Функция возвращает объект, содержащий опции метки.
         * Все опции, которые поддерживают геообъекты, можно посмотреть в документации.
         * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject.xml
         */
		getPointOptions = [ 
				<?php foreach ($list as $item) { ?>	
					{
						//preset: "islands#redAttentionCircleIcon",
            // Опции.
            // Необходимо указать данный тип макета.
            iconLayout: 'default#image',
            // Своё изображение иконки метки.
			<?php 	if($item->parent_id == 11) { $ic = 'auto.png'; }
				if($item->parent_id == 20) { $ic = 'bank.png'; }
				if($item->parent_id == 24) { $ic = 'flag.png'; }
				if($item->parent_id == 35) { $ic = 'kafe.png'; }
				if($item->parent_id == 37) { $ic = 'deti.png'; }
				if($item->parent_id == 53) { $ic = 'shop.png'; }
				if($item->parent_id == 79) { $ic = 'razvlecheniya.png'; }
				if($item->parent_id == 84) { $ic = 'medical.png'; }
				if($item->parent_id == 92) { $ic = 'obrazovanie.png'; }
				if($item->parent_id == 97) { $ic = 'home.png'; }
				if($item->parent_id == 111) { $ic = 'krasota.png'; }
				if($item->parent_id == 116) { $ic = 'sport.png'; }
				if($item->parent_id == 128) { $ic = 'eda.png'; }
				if($item->parent_id == 137) { $ic = 'business.png'; }
				if($item->parent_id == 147) { $ic = 'turizm.png'; }
				if($item->parent_id == 2010) { $ic = 'uslugi.png'; }
				if($item->parent_id == 2019) { $ic = 'proizvodstvo.png'; }
				if($item->parent_id == 2023) { $ic = 'selhoz.png'; }
			?>
            iconImageHref: "images/icons/map/<?php echo $ic ?>",
            // Размеры метки.
            iconImageSize: [32, 32],
            // Смещение левого верхнего угла иконки относительно
            // её "ножки" (точки привязки).
            iconImageOffset: [-16, -16]
					},
				<?php } ?>
		],
    
        points = [
			<?php foreach ($list as $key => $item) { 
				$link = JRoute::_(ContentHelperRoute::getArticleRoute($item->slug, $item->catid, $item->language));
				$img = json_decode($item->images)->image_intro;
				
				JLoader::register('FieldsHelper', JPATH_ADMINISTRATOR . '/components/com_fields/helpers/fields.php');
				$jcfields = FieldsHelper::getFields('com_content.article', $item, true);
				foreach($jcfields as $fields) {
					$f[$fields->id] = $fields;
				} 
				$t = '['.$f[109]->value.'],';
				
			?>
			<?php echo $t ?>
			<?php } ?>
        ],
		balloonContentHeader = [
		<?php foreach ($list as $key => $item) { 
				$link = JRoute::_(ContentHelperRoute::getArticleRoute($item->slug, $item->catid, $item->language));
				$img = json_decode($item->images)->image_intro;
					
				JLoader::register('FieldsHelper', JPATH_ADMINISTRATOR . '/components/com_fields/helpers/fields.php');
				$jcfields = FieldsHelper::getFields('com_content.article', $item, true);
				foreach($jcfields as $fields) {
					$f[$fields->id] = $fields;
				} 
				$b = '{
					balloonContentHeader: `<div class="map_item_img"><img src="'.$img.'"/></div><div class="map_item_info"><h3><a href="'.$link.'">'.$item->title.'</a></h3><div>'.$f[1]->value.'</div></div>`,
					},';
				?>
				<?php echo $b ?>
			<?php } ?>			
		]
        geoObjects = [];

    /**
     * Данные передаются вторым параметром в конструктор метки, опции - третьим.
     * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Placemark.xml#constructor-summary
     */
    for(var i = 0, len = points.length; i < len; i++) {
        geoObjects[i] = new ymaps.Placemark(points[i], balloonContentHeader[i], getPointOptions[i]);
    }

    /**
     * Можно менять опции кластеризатора после создания.
     */
    clusterer.options.set({
        gridSize: 80,
        clusterDisableClickZoom: false
    });

    /**
     * В кластеризатор можно добавить javascript-массив меток (не геоколлекцию) или одну метку.
     * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Clusterer.xml#add
     */
    clusterer.add(geoObjects);
    myMap.geoObjects.add(clusterer);
	myMap.behaviors.disable('scrollZoom');
	
	if(document.documentElement.clientWidth < 960) {
		//myMap.behaviors.disable('drag');
	}
	

    /**
     * Спозиционируем карту так, чтобы на ней были видны все объекты.
     */

   /* myMap.setBounds(clusterer.getBounds(), {
        checkZoomRange: false
    });*/
});
</script>

<div id="map">
	<div class="all_gorod_map">
		<div class="left_block">
		<?php echo JHtml::_('content.prepare', '{loadposition cat_map}'); ?>
		</div>
	</div>
</div>
Народ всем привет. вот сайт https://prosalsk.ru/, стоят яндекс карты. Если их выключить то Google Page Speed показывает 90/100. Но они должны быть включены, как их отложить или асинхронно загрузить, у меня не хватает мозгов..
  • Вопрос задан
  • 53 просмотра
Пригласить эксперта
Ответы на вопрос 4
anton_reut
@anton_reut
Начинающий веб-разработчик
Сделай загрузку только когда посетитель проскроллил до этого места, на js это делается.
Ответ написан
sotvm
@sotvm
Умный поймёт , а дураку и так всё равно.
гугли
"lazy load яндекс карты"
https://joomlaforum.ru/index.php/topic,317708.0.html
Ответ написан
@exmmth
CMS Joomla, JBZoo
Вот решение
https://gist.github.com/volandku/50de5fcff12d0240f...
в callback можно передать функцию где ставишь метки и прочие манипуляции с картой
Ответ написан
sinneren
@sinneren
если jquery, то
$.getScript('url_to_ymaps', function () { ymaps.ready(....)});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы