www.prismasites.com
I am creating a unique world map by using SVG DIVs shaped like Continents.
Upon clicking on a continent on the world map, it conceals the world map DIV and displays the respective continent DIV with SVG.
I have successfully achieved this functionality.
However, each continent's SVG is housed within a .php file.
The .php files are loaded and placed inside hidden DIVs as shown below:
<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>
THE ISSUE:
The browser loads all DIVs in sequential order, including hidden DIVs.
Hidden DIVs still load all Continent SVGs, which are large vector files and take a long time to load.
When the page is initially loaded, it stops before Testimonials to load all hidden DIVs, causing a delay.
Instead of loading hidden DIVs first, I want the browser to prioritize loading smaller basic box DIVs that load faster before larger complex-shaped DIVs.
I desire for the FAQ and Contact Sections to be loaded before the hidden DIVs in the Testimonial Section.
To achieve this, I need to prevent the browser from loading hidden DIVs at startup or only load them upon mouse click.