Всем здравствуйте! Вместе со страницей сайта грузится Яндекс карта и очень замедляет загрузку всей страницы. Подскажите, пожалуйста, как сделать, чтобы она загружалась только при клике на кнопку: Код (Text): <input type="button" id="karta" class="knopka_poisk" value="Показать карту"> и закрывалась при клике на эту же кнопку, но уже с value="Скрыть карту" Сама карта выводится в теге: Код (Text): <div align="center" id="YMapsID" style="width:560px; height:300px" class="img_podaty"></div> Вот отрывок JS кода загрузки карты на страницу: Код (Text): <script type="text/javascript"> window.onload = function () { map = new YMaps.Map(document.getElementById("YMapsID")); map.addControl(new YMaps.TypeControl()); map.addControl(new YMaps.Zoom()); map.addControl(new YMaps.SearchControl({noPlacemark: true})); button = new YMaps.ToolBarButton({caption: "<b>Удалить метку</b>", hint: "Очистить карту"}); map.addControl(new YMaps.ToolBar([button])); metka_map = "<?php if (!empty($_POST['metka'])) {$metka = $_POST['metka']; echo $metka;} else {$metka = ""; echo "нет";}?>"; mashtab_map = "<?php if (!empty($_POST['mashtab'])) {$mashtab = $_POST['mashtab']; echo $mashtab;} else {$mashtab = ""; echo "нет";}?>"; ........... </script>
у тебя скрипт навешан на Код (Text): <script type="text/javascript"> window.onload = function () {} переделай на клик. Или все сложнее?
Ещё можно так: вынести всё в отдельный js файл + http://htmlbook.ru/html/script/async Добавлено спустя 2 минуты 12 секунд: или так https://github.com/silvestreh/onScreen
Нужно, чтобы карта грузилась и открывалась только при нажатии Код (Text): <input type="button" id="karta" class="knopka_poisk" value="Показать карту">
Код (Text): <script type="text/javascript"> document.getElementById('karta').onclick = function () { map = new YMaps.Map(document.getElementById("YMapsID")); map.addControl(new YMaps.TypeControl()); map.addControl(new YMaps.Zoom()); map.addControl(new YMaps.SearchControl({noPlacemark: true})); button = new YMaps.ToolBarButton({caption: "<b>Удалить метку</b>", hint: "Очистить карту"}); map.addControl(new YMaps.ToolBar([button])); .... Не работает( И отображается пустой Код (Text): <div align="center" id="YMapsID" style="width:560px; height:300px" class="img_podaty"></div>
Оберни весь этот код дополнительно. document.body.onload = function(){ }; Ну или любой другой альтернативой, которая сработает только после загрузки body.
Код (Text): <script type="text/javascript"> document.body.onload = function(){ document.getElementById('karta').onclick = function () { map = new YMaps.Map(document.getElementById("YMapsID")); Не работает и в консоли пишет: TypeError: document.body is null
Окей, оборачивайте все в Код (Text): function loadMaps(){ }; И в событие. По аналогии: Код (Text): function loadMaps(){ document.getElementById('karta').onclick = function () { //ваш код, который выполнится по клику на кнопку }; }; а тегу body, в разметке, допишите событие, чтобы было так: <body onload="loadMaps()">
Так заработало. В этом случае карта при клике загружается или просто открывается? Как убрать отображение пустого тега div перед нажатием кнопки? Код (Text): <div align="center" id="YMapsID" style="width:560px; height:300px" class="img_podaty"></div>
Загружается. До клика она загружена не будет. можешь ему display: none поставить. А можно его самого создавать по клику и втыкать куда надо. Ну а потом заведи условие, мол карта загружена и показана или нет. И, при повторном клике, проверяй его. Если не загружена, загружать, если загружена и скрыта, показать не загружая заново, если показана, скрыть.
Все получилось!!! Спасибо всем участникам!!! Особенную благодарность хочу выразить участнику этого форума "Fell-x27" за очередную помощь!
Не за что. Если человек готов учиться и, после пары наставлений способен, по абстрактному описанию решения, довести его до состояния "все получилось", это уже лучше любого "спасибо".