加载隐藏的DIV最后或OnMouseClick

Question

www.prismasites.com

我正在制作一个世界地图，DIV使用SVG形状像Continents。

当我点击世界地图上的一个大陆时，它隐藏了世界地图DIV并用SVG显示了大陆DIV。

我已经完成了这个。

然而

每个大陆SVG包含PHP文件

的PHP文件被加载并放置内隐藏的DIV内。

像这样

<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> 

问题：

浏览器加载的顺序布局令所有div。

包括隐藏DIV的

所以像...

1. 负载任务＃1：基本DIV] ---加载

2. 负载任务＃2：{疯狂大型隐藏SVG Div} ---过去1分钟内加载45％

3. 加载任务3：[basic div] ---在队列中[未加载但]。

4. 加载任务＃4：[basic div] ---队列中[尚未加载]。

隐藏DIV的还是加载所有大陆SVG的

所有大陆SVG的是巨大的矢量文件

他们需要很长的时间来加载。

www.prismasites.com

页面加载 这没关系加载，直到褒奖

有其停止并进入隐形 要加载的所有隐藏的DIV。

这停止加载所有其他的DIV

这需要1分钟加载所有隐藏层

这是载入网站缓慢迟钝的方式。

因为它应该载入所有小箱基本DIV的具有较小尺寸的加载速度FIRST

它应该载入HIDDEN复杂的定制异型DIV的具有较大尺寸加载速度较慢LAST

我想它会在我的常见问题部分和联系人部分加载DIV，然后将所有隐藏的DIV加载到我的见证部分中。

因此，而不是这个

负载任务＃1：[基本的div] ---加载

负载任务＃2：{疯狂大隐SVG股利} ---装载45％过去1分钟

加载任务＃3：[basic div] ---队列中[尚未加载]。

加载任务＃4：[basic div] ---队列中[尚未加载]。

我想这

负载任务＃1：基本DIV] ---加载

负载任务＃4：{疯狂大隐SVG股利} ---装45％过去1分钟

加载任务＃3：[basic div] ---加载。

加载任务2：[basic div] ---加载。

---

所以使用jQuery/JavaScript的

我怎样才能拥有它，这样在我的网页不加载隐藏DIV的启动？

我该如何使浏览器加载隐藏的DIV的最后？

OR

我怎么能有它，以便隐藏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>