нагрузки Hidden DIVs Последние или OnMouseClick

Question

www.prismasites.com

Я сделать карту мира с DIV-х, имеющая форму материков с помощью SVG.

Когда я нажимаю на континент на карте мира - он скрывает карту мира DIV и показывает континенту DIV с SVG.

Я уже это сделал.

Однако

Каждый континент SVG содержится в .php файле

файл .php загружен и помещен в скрытые DIVs.

Подобно

<div id="TestimonialsMap"> 
<?php locate_template(array('worldmap.php', 'worldmap.php', 'worldmap.php'), true, false); ?> 
</div> 
<div id="TestimonialsMapNorthAmerica" style="display:none;"> 
<?php locate_template(array('WorldMapNorthAmerica.php', 'WorldMapNorthAmerica.php', 'WorldMapNorthAmerica.php'), true, false); ?> 
</div> 
<div id="TestimonialsMapSouthAmerica" style="display:none;"> 
<?php locate_template(array('WorldMapSouthAmerica.php', 'WorldMapSouthAmerica.php', 'WorldMapSouthAmerica.php'), true, false); ?> 
</div> 
<div id="TestimonialsMapEurope" style="display:none;"> 
<?php locate_template(array('WorldMapEurope.php', 'WorldMapEurope.php', 'WorldMapEurope.php'), true, false); ?> 
</div> 
<div id="TestimonialsMapAfrica" style="display:none;"> 
<?php locate_template(array('WorldMapAfrica.php', 'WorldMapAfrica.php', 'WorldMapAfrica.php'), true, false); ?> 
</div> 
<div id="TestimonialsMapMiddleEast" style="display:none;"> 
<?php locate_template(array('WorldMapMiddleEast.php', 'WorldMapMiddleEast.php', 'WorldMapMiddleEast.php'), true, false); ?> 
</div> 
<div id="TestimonialsMapAsia" style="display:none;"> 
<?php locate_template(array('WorldMapAsia.php', 'WorldMapAsia.php', 'WorldMapAsia.php'), true, false); ?> 
</div> 
<div id="TestimonialsMapOceania" style="display:none;"> 
<?php locate_template(array('WorldMapOceania.php', 'WorldMapOceania.php', 'WorldMapOceania.php'), true, false); ?> 
</div> 

ПРОБЛЕМА:

Браузер загружает все DIVs в последовательном Компоновка ордену.

включая скрытые Div в

Так как ...

1. Задача загрузки # 1: [основной сНу] --- Loaded

2. нагрузки Задание # 2: {шального Large Hidden SVG Div} --- загрузка 45% за последние 1 минуту

3. Загрузить задачу №3: [базовый div] --- В очереди [не загружен все же ].

4. Загрузить задачу № 4: [базовый div] --- В очереди [еще не загружен].

Hidden ДИВА по-прежнему загрузить все Continent SVG в

Всего Continent SVG является ОГРОМНЫМ Vector Files

Они занимают много времени для загрузки.

www.prismasites.com

При загрузке страницы Это не загружает нормально до тех пор Отзывы

Там он останавливается и идет невидимая Чтобы загрузить все скрытые DIVs.

Здесь он останавливает загрузку всех остальных DIVs

Здесь занимает 1 минуту, чтобы загрузить все скрытые DIVs

, который является медленным отсталый способ загрузки веб-сайта.

Потому что он должен загрузить все малую основную коробку DIV о том, что имеет меньший размер, который загружается быстрее FIRST

И он должен загрузить HIDDEN Сложного пользовательских форм DIV-х, которые имеют больший размер, который загружается медленнее ПОСЛЕДНИМ

Я хочу он загружает DIV в раздел «FAQ» и «Контактные разделы», прежде чем он загрузит все мои скрытые DIV в разделе «Мой отзыв».

Таким образом, вместо этого

нагрузки Задача # 1: [основной ДИВ] --- Loaded

Задача загрузки # 2: {Сумасшедшие Большой Hidden SVG Div} --- нагрузка 45% для минута 1 минута

Загрузить задачу №3: [базовый div] --- В очереди [еще не загружен].

Загрузить задачу № 4: [базовый div] --- В очереди [еще не загружен].

Я хочу, чтобы этот

нагрузка Задача # 1: [основной Div] --- Loaded

Целевых нагрузок # 4: {Сумасшедшие Большого Hidden SVG Div} --- загрузки 45% за последние 1 минуту

Загрузить задачу №3: [базовый div] --- загружен.

Загрузить задачу №2: [базовый div] --- загружен.

---

Таким образом, используя Jquery/Javascript

Как я могу иметь это так, что мой веб-страница не загружается скрытые DIV на запуске?

Как это сделать, чтобы браузер загружал скрытые DIV's LAST?

ИЛИ

Как я могу это так, что браузер загружает скрытые DIV только по щелчку мыши?

Answer 1

window.onload = function(){ 
 
    
 
    document.getElementById("complex").innerHTML="COMPLEX STUFF HERE" 
 
}; 
 

 
function clickme(e){ 
 

 
e.innerHTML="your stuff is now loading blah blagh"; 
 
};

img{max-width:100px;max-height:100px;}

<img src="http://lorempixel.com/400/200/" alt="Lorem Pixel" /><img src="http://lorempixel.com/400/300/" alt="Lorem Pixel" /><img src="http://lorempixel.com/400/400/" alt="Lorem Pixel" /><img src="http://lorempixel.com/400/200/" alt="Lorem Pixel" /> 
 

 
<div id="complex"> 
 
    <img src="http://ppt4web.ru/assets/2c736062/img/loading.gif" alt="loading" /> 
 

 
</div> 
 

 
<img src="http://lorempixel.com/400/600/" alt="Lorem Pixel" /> 
 
<img src="http://lorempixel.com/400/700/" alt="Lorem Pixel" /><img src="http://lorempixel.com/200/200/" alt="Lorem Pixel" /><img src="http://lorempixel.com/300/200/" alt="Lorem Pixel" /><img src="http://lorempixel.com/400/200/" alt="Lorem Pixel" /><img src="http://lorempixel.com/500/200/" alt="Lorem Pixel" /><img src="http://lorempixel.com/600/200/" alt="Lorem Pixel" /><img src="http://lorempixel.com/700/200/" alt="Lorem Pixel" /><img src="http://lorempixel.com/800/200/" alt="Lorem Pixel" /><img src="http://lorempixel.com/900/200/" alt="Lorem Pixel" /> 
 
<img src="http://lorempixel.com/444/344/" alt="Lorem Pixel" /> 
 
<img src="http://lorempixel.com/604/350/" alt="Lorem Pixel" /> 
 
<img src="http://lorempixel.com/408/366/" alt="Lorem Pixel" /> 
 
<img src="http://lorempixel.com/400/320/" alt="Lorem Pixel" /> 
 
<img src="http://lorempixel.com/400/340/" alt="Lorem Pixel" /> 
 
<img src="http://lorempixel.com/999/306/" alt="Lorem Pixel" /> 
 
<img src="http://lorempixel.com/998/306/" alt="Lorem Pixel" /> 
 
<img src="http://lorempixel.com/976/306/" alt="Lorem Pixel" /> 
 
<img src="http://lorempixel.com/996/306/" alt="Lorem Pixel" /> 
 
<img src="http://lorempixel.com/985/306/" alt="Lorem Pixel" /> 
 
<img src="http://lorempixel.com/974/306/" alt="Lorem Pixel" /> 
 

 
<h2>OR</h2> 
 

 
<div onclick="clickme(this)">Click me</div>