Question

www.prismasites.com

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

当我点击世界地图上的一个大陆时 - 它隐藏了世界地图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＆＃39>

所以... ...

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



加载任务＃2：{Crazy Large Hidden SVG Div} ---过去1分钟加载45％



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



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

隐藏的DIV仍在加载All Continent SVG＆＃39>

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

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

www.prismasites.com

页面加载时它会加载好，直到推荐书

它会停止并变得不可见加载所有隐藏的DIV。

此处它会停止加载所有其他DIV

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

加载网站的速度缓慢。

因为它应该加载所有小型基本盒子DIV，它们的尺寸更小，加载速度更快

它应该加载HIDDEN复杂的自定义形状DIV，其尺寸更大，加载速度更慢

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

所以不是这个

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

加载任务＃2：{Crazy Large Hidden SVG Div} ---过去1分钟加载45％

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

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

我想要这个

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

加载任务＃4：{Crazy Large Hidden SVG Div} ---过去1分钟加载45％

加载任务＃3：[基本div] ---已加载。

加载任务＃2：[基本div] ---已加载。

所以使用Jquery / Javascript

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

如何让浏览器加载隐藏的DIV最后？

OR

我怎样才能让浏览器只在鼠标点击时加载隐藏的DIV？

Answer 1

＆＃13;

window.onload = function(){
  
  document.getElementById("complex").innerHTML="COMPLEX STUFF HERE"
 };

function clickme(e){

e.innerHTML="your stuff is now loading blah blagh";
};

＆＃13;

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

＆＃13;

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

＆＃13;

加载隐藏的DIVs Last或OnMouseClick

1 个答案: