Предзагрузка содержимого 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); }); Можно поэкспериментировать вставляя в конец подгружаемого контента пиксельное изо и отслеживать его загрузку |
Часовой пояс GMT +3, время: 09:34. |