Предзагрузка содержимого div
Есть карта в формате svg. При её загрузке на страницу регионы появляются по очереди, а хотелось бы чтоб появлялась сразу вся карта.
Можно ли поставить некую картинку на заставку в блок div , а уже после полной загрузки карты заменить эту картинку картой? Вариант: $(document).ready( function(){ $('#conteyner-map').load('includes/map_svg.html') }); по понятным причинам не подходит. Нужно чтоб карта была полностью загружена на момент вывода. |
Цитата:
Если он настолько сложный что браузер его долго рендерит, то не думаю что возможно отследить этот процесс. |
Карта представляет из себя xml-код svg за вычетом самого объявления xml (<?xml version="1.0" encoding="utf-8"?>). Она сделана отдельным html-файлом для вставки в основной html страницы (так вроде оптимальней для кодинга).
Достаточно объемный код (не сверх, но всё же). Браузер его рендерит: при быстром соединении 3-5 сек при медленном по полминуты и более... При любом соединении регионы появляются по очереди, а этого и хочеться избежать. Неужели это не возможно??? |
Может можно как-то через тот же $('#conteyner-map').load('includes/map_svg.html'), но не выводить ответ сервера до полной загрузки собственно ответа?
|
Все же не ясно зачем svg совать в html. Ведь в таком случае поддержка браузеров хуже. Изначально браузеры поддерживали только <object> и <img> с svg. Инлайновый svg прямо в html уже придумали позже. http://caniuse.com/#search=svg.
Цитата:
|
Вот что получается при использовании load http://proba-global.mcdir.ru/
При быстром соединении, может и не заметно, а при медленном отчетливо видно как регионы карты выводятся поочерёдно, да ещё и ниже conteyner-map... |
Dozentos,
Вариант 1.Поставьте иконку прелоадера до полной загрузки, Вариант 2- подгружать карту в скрытый div, с последующей перезаписью в LocalStorage после полной загрузки Главной страницы(если её уже там нет), на странице с картой оттуда вытаскивать |
А по поводу поддержки браузеров:
Может она и лучше, но запустить это дело под IE 8 у меня получилось только используя конструкцию вида: <div class="mapArea" data-path="m 173.21875,211.4687......></div> и плагина raphael. В остальном браузеры поддерживают обе конструкции (как через <object>, так и мой вариант), но с для моего варианта проще писать код. (по крайней мере, мне так кажеться). |
Deff,
а можно оба ваших варианта с примером кода? Потому как я вроде бы сделал по варианту № 1, но результат не оправдал ожиданий по причине уже выше описанной (даже ссылка на пример работы есть, правда не факт, что быстром соединении заметен недостаток). А сделано так: В <div id='conteyner-map'> вставлен <img>, а в javascript прописано: $(document).ready(function () { $('#conteyner-map').load('includes/map_svg.html'); }); Может надо как-то иначе???? |
Dozentos,
Может тупо подобрать задержку ? ( Я не знаю признака окончания загрузки для svg... $(window).load(function () { setTimeout(function () {alert('Done')},9000); }); Можно поэкспериментировать вставляя в конец подгружаемого контента пиксельное изо и отслеживать его загрузку |
Deff,
А как отследить загрузку изо? С задержкой сейчас попробую... только не будет ли такого же результата спустя эту самую задержку... |
Цитата:
<script type="text/javascript"> function Myfunc() { alert("Done") } </script> <img src="http://javascript.ru/forum/images/smilies/smile.gif" onload="Myfunc()"> |
Всё поправилось, моя вина - неразумного.
Дело было в следующем: до решения заменить карту картинкой, карта выводилась на странице в блоке: <?php include('map.html') ?>. После манипуляций со вставкой изо я закоментировал php-код, но он всё равно почему-то выводил карту, убирая её после загрузки страницы... Вот такой новый для меня эффект... Проблемма решилась удалением блока php. |
Часовой пояс GMT +3, время: 20:05. |