Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.10.2013, 10:47
Аватар для Dozentos
Аспирант
Отправить личное сообщение для Dozentos Посмотреть профиль Найти все сообщения от Dozentos
 
Регистрация: 08.10.2013
Сообщений: 47

Предзагрузка содержимого div
Есть карта в формате svg. При её загрузке на страницу регионы появляются по очереди, а хотелось бы чтоб появлялась сразу вся карта.
Можно ли поставить некую картинку на заставку в блок div , а уже после полной загрузки карты заменить эту картинку картой?

Вариант:
$(document).ready(
function(){
$('#conteyner-map').load('includes/map_svg.html')
});
по понятным причинам не подходит. Нужно чтоб карта была полностью загружена на момент вывода.
Ответить с цитированием
  #2 (permalink)  
Старый 13.10.2013, 11:11
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Dozentos
При её загрузке на страницу регионы появляются по очереди
Где демо проблемы? Вся карта представляет из себя один svg-файл?
Если он настолько сложный что браузер его долго рендерит, то не думаю что возможно отследить этот процесс.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 13.10.2013, 11:18
Аватар для Dozentos
Аспирант
Отправить личное сообщение для Dozentos Посмотреть профиль Найти все сообщения от Dozentos
 
Регистрация: 08.10.2013
Сообщений: 47

Карта представляет из себя xml-код svg за вычетом самого объявления xml (<?xml version="1.0" encoding="utf-8"?>). Она сделана отдельным html-файлом для вставки в основной html страницы (так вроде оптимальней для кодинга).
Достаточно объемный код (не сверх, но всё же). Браузер его рендерит:
при быстром соединении 3-5 сек
при медленном по полминуты и более...

При любом соединении регионы появляются по очереди, а этого и хочеться избежать.
Неужели это не возможно???
Ответить с цитированием
  #4 (permalink)  
Старый 13.10.2013, 11:22
Аватар для Dozentos
Аспирант
Отправить личное сообщение для Dozentos Посмотреть профиль Найти все сообщения от Dozentos
 
Регистрация: 08.10.2013
Сообщений: 47

Может можно как-то через тот же $('#conteyner-map').load('includes/map_svg.html'), но не выводить ответ сервера до полной загрузки собственно ответа?
Ответить с цитированием
  #5 (permalink)  
Старый 13.10.2013, 12:57
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Все же не ясно зачем svg совать в html. Ведь в таком случае поддержка браузеров хуже. Изначально браузеры поддерживали только <object> и <img> с svg. Инлайновый svg прямо в html уже придумали позже. http://caniuse.com/#search=svg.

Сообщение от Dozentos
Вариант:
$(document).ready(
function(){
$('#conteyner-map').load('includes/map_svg.html')
});
по понятным причинам не подходит. Нужно чтоб карта была полностью загружена на момент вывода.
load запрашивает ресурс через XMLHttpRequest и вставляет полученный код только получив его целиком. Не это ли требуется?
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #6 (permalink)  
Старый 13.10.2013, 13:10
Аватар для Dozentos
Аспирант
Отправить личное сообщение для Dozentos Посмотреть профиль Найти все сообщения от Dozentos
 
Регистрация: 08.10.2013
Сообщений: 47

Вот что получается при использовании load http://proba-global.mcdir.ru/
При быстром соединении, может и не заметно, а при медленном отчетливо видно как регионы карты выводятся поочерёдно, да ещё и ниже conteyner-map...
Ответить с цитированием
  #7 (permalink)  
Старый 13.10.2013, 13:14
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

Dozentos,
Вариант 1.Поставьте иконку прелоадера до полной загрузки,
Вариант 2- подгружать карту в скрытый div, с последующей перезаписью в LocalStorage после полной загрузки Главной страницы(если её уже там нет), на странице с картой оттуда вытаскивать

Последний раз редактировалось Deff, 13.10.2013 в 13:17.
Ответить с цитированием
  #8 (permalink)  
Старый 13.10.2013, 13:17
Аватар для Dozentos
Аспирант
Отправить личное сообщение для Dozentos Посмотреть профиль Найти все сообщения от Dozentos
 
Регистрация: 08.10.2013
Сообщений: 47

А по поводу поддержки браузеров:
Может она и лучше, но запустить это дело под IE 8 у меня получилось только используя конструкцию вида: <div class="mapArea" data-path="m 173.21875,211.4687......></div> и плагина raphael.
В остальном браузеры поддерживают обе конструкции (как через <object>, так и мой вариант), но с для моего варианта проще писать код. (по крайней мере, мне так кажеться).
Ответить с цитированием
  #9 (permalink)  
Старый 13.10.2013, 13:24
Аватар для Dozentos
Аспирант
Отправить личное сообщение для Dozentos Посмотреть профиль Найти все сообщения от Dozentos
 
Регистрация: 08.10.2013
Сообщений: 47

Deff,
а можно оба ваших варианта с примером кода?
Потому как я вроде бы сделал по варианту № 1, но результат не оправдал ожиданий по причине уже выше описанной (даже ссылка на пример работы есть, правда не факт, что быстром соединении заметен недостаток).

А сделано так:
В <div id='conteyner-map'> вставлен <img>, а в javascript прописано:
$(document).ready(function () {
$('#conteyner-map').load('includes/map_svg.html');
});

Может надо как-то иначе????
Ответить с цитированием
  #10 (permalink)  
Старый 13.10.2013, 13:42
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

Dozentos,
Может тупо подобрать задержку ? ( Я не знаю признака окончания загрузки для svg...

$(window).load(function () {
 setTimeout(function () {alert('Done')},9000);
});


Можно поэкспериментировать вставляя в конец подгружаемого контента пиксельное изо и отслеживать его загрузку
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
сохранение содержимого div в файл Vic2581 Общие вопросы Javascript 10 13.12.2012 13:50
Реакция на изменение содержимого DIV Rentony Events/DOM/Window 1 29.03.2012 12:57
Изменение содержимого DIV BorisBritva jQuery 2 11.03.2012 10:02
Изменение содержимого div по клику и передача данных POST Serious2008 Общие вопросы Javascript 3 13.11.2011 18:12
Инкремент содержимого div astral Общие вопросы Javascript 3 02.07.2010 21:43