jquery - 最后加载隐藏的 DIV 或 OnMouseClick

Question

www.prismasites.com

我正在使用 SVG 使用形状像大陆的 DIV 制作世界地图。

当我点击世界地图上的大陆时 - 它会隐藏世界地图 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. Load Task #1: [basic div] --- Loaded

2. Load Task #2: {Crazy Large Hidden SVG Div} --- loading 45% for the past 1 minute

3. Load Task #3: [basic div] --- In queue [ not loaded yet ].

4. Load Task #4: [basic div] --- In queue [ not loaded yet ].

隐藏的 DIV 仍然加载所有大陆的 SVG

所有 Continent SVG 都是巨大的矢量文件

它们需要很长时间才能加载。

www.prismasites.com

页面加载时它加载正常，直到推荐

它在那里停下来，看不见了加载所有隐藏的 DIV。

在这里它停止加载所有其他 DIV

这里加载所有隐藏的DIV需要1分钟

这是一种缓慢加载网站的方式。

因为它应该首先加载所有尺寸较小的小型基本盒 DIV，加载速度较快

它应该加载 HIDDEN Complex Custom Shaped DIV，这些 DIV 具有更大的尺寸，但最后加载速度较慢

我希望它在我的推荐部分加载我所有隐藏的 DIV 之前加载我的常见问题解答部分和联系部分中的 DIV。

所以不是这个

Load Task #1: [basic div] --- Loaded

Load Task #2: {Crazy Large Hidden SVG Div} --- loading 45% for the past 1 minute

Load Task #3: [basic div] --- In queue [ not loaded yet ].

Load Task #4: [basic div] --- In queue [ not loaded yet ].

我要这个

Load Task #1: [basic div] --- Loaded

Load Task #4: {Crazy Large Hidden SVG Div} --- loading 45% for the past 1 minute

Load Task #3: [basic div] --- loaded.

Load Task #2: [basic div] --- loaded.

---

所以使用 Jquery/Javascript

我怎样才能让我的网页在启动时不加载隐藏的 DIV？

我怎样才能让浏览器加载隐藏的 DIV 的最后一个？

或

我怎样才能让浏览器仅在鼠标单击时加载隐藏的 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>