Hide elements in hidden divs until the page is fully loaded to reduce initial page

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.

jqueryhtmlcssloadhidden

Answer №1

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

function clickme(e){

e.innerHTML="your content is now being loaded 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Jquery to display text when the condition is not met

Here is the code snippet I am currently working with: http://jsfiddle.net/spadez/mn77f/6/ I am trying to make it display a message when there are no fields (questions) present. I attempted to achieve this by adding the following lines of code: } else ...

javascriptjquery

Develop a specialized WordPress widget featuring several unique text areas for enhanced customization

class ad_widget extends WP_Widget { function __construct() { $widget_ops = array( 'classname' => 'ad-widget-container', 'description' => __( ' Ad WIDGET' ) ); parent::__construct( 'ad-widget', ...

phpjavascriptjquerywordpress

Is there a way to implement a JQuery Keyup event listener on all forms within a webpage

Can keyup with jQuery be utilized for multiple form input fields without knowing their specific ID, but only their class or containing div? Here is an example of it working with a specific form ID "add": $(add).keyup(function () { value = $(add).val() ...

jquerykeyup

In ASP.NET MVC, use CSS styling specifically for Partial Views by encapsulating the styles within a `<style scoped>` tag

A new HTML attribute has emerged, known as scoped, however, it is currently only supported by Firefox. This attribute allows you to declare internal styles solely for the parent element. I am curious if it is feasible to replicate this functionality in AS ...

asp.net-mvchtmlcssasp.net-mvc-5

Utilize Ajax to showcase MySQL query outcomes upon onClick() event

As a newcomer to Ajax scripts, I am currently working on creating a script that will showcase MySQL query results when a user clicks on a specific link. My approach involves utilizing the onClick() function to trigger an Ajax script. Below is a snippet of ...

ajaxjquery

"Google Chrome v84 does not render elements with zero height, line-height, and display: flex correctly

In Google Chrome v84, there seems to be an issue with line-height and display: flex (Chrome v83 and FireFox are not affected). The height of the element is not always enforced properly. <div class="outer-wrapper"> <div class="wrap ...

htmlcssgoogle-chrome

Dropdown in Angular JS is displaying incorrect values in the options

I am a newcomer to AngularJS and encountering an issue with populating a dropdown. Within a foreach loop of data retrieved from the server, I have created an array of user data: $scope.Users.push( { userid: ...

javascriptjqueryangularjs

Show the attribute of an element in a pop-up window

I have a modal from ngx-bootstrap that I want to display in there a property of my object let's say the name: public students = [ { id: 1, name: 'lorem'} In this button that is common for all entries in the table (each row has this butt ...

htmlangulartypescript

Leveraging jQuery.css for retrieving values in Internet Explorer

I need to assign a variable to the value of the border-color property of my div errorChartColorError = $('.col__item.error').css('border-color'); Although this code works fine in Chrome, Internet Explorer 11 returns it as undefined W ...

jquerycssinternet-explorerinternet-explorer-11

Is there a way to determine if an ajax call is currently in progress in JavaScript?

I developed a function that triggers an AJAX request to load more content as the user scrolls down. However, in order for it to function properly and not fire multiple times consecutively if the user continues scrolling before the previous request is comp ...

jqueryajax

The issue with Cordova (PhoneGap) is that when you move a video file captured by the camera, the gallery thumbnail

Is there a plugin available for Cordova (Android) that can refresh the gallery? I am currently capturing video using the Cordova plugin cordova-plugin-media-capture, which saves the video to the default sdcard path (gallery). After saving the file, I ...

androidjqueryioscordovavideo

What is the best way to access the id attribute of a <td> element within a <tr> using jQuery?

Can someone assist me with this issue? Is there a way to get the ID of the first or second td element instead of using a loop? Here is an example: "<tr class='test_point' id="+fileName+"><td><img src='"+ROOT_PATH+"/assets/d ...

javascriptjquery

Issue with margins of sections when attempting to activate menu class while scrolling

My Objective: I want to create a website where the menu highlights the section that is currently being viewed as the user scrolls up and down. Progress So Far: I have successfully implemented a functioning menu that changes to "active" when the correspo ...

javascriptjqueryhtmlcss

A distinctive web page featuring an engaging image backdrop: captivating content effortlessly scrolling beneath

On my website, I have implemented a background image with a fixed transparent header. When scrolling down, I want the main content to be hidden beneath the header. To achieve this effect, I used the -webkit-mask-image property. However, this approach affec ...

htmlcssimagescrolltransparency

Switch between Light and Dark Modes effortlessly with just one button

I've created a code that effortlessly switches between light mode and dark mode with the press of buttons. However, I'm looking to combine these two functionalities into a single toggle button for ease of use. If anyone can provide insight on how ...

javascripthtml

Remove the unnecessary space at the bottom of the Mat Dialog

I'm currently utilizing Angular Material within my Angular application. One issue I am facing is the excessive whitespace at the bottom of a dialog that displays information about a post. How can I reduce or eliminate this unnecessary space? Take a l ...

htmlcssangularangular-materialdialog

When attempting to capture an element screenshot as PNG, a TypeError occurs indicating that the 'bytes' object is not callable

Can someone please help me figure out how to save a screenshot of a specific element in Selenium using Python3? Here is the code I am trying: from selenium import webdriver import pyautogui as pog import time options = webdriver.ChromeOptions() options ...

javascriptpythonhtmlseleniumtypeerror

What is the best way to retrieve keys and values in jQuery after receiving an object through $.ajax and json_encode($arr) in PHP?

4 In my PHP code: $arr = array( 10=>"ten", 5=>"five", 2=>"two"); return json_encode($arr); When I use JS with $.ajax(): success: function(data){ console.log(data);} 5 After checking the console, it shows : Object {2: "two", 5: "five", 10: " ...

phpjqueryarraysajax

Merge HTML/CSS with JavaFX's FXML and customize the style using CSS

Quick Summary: I have a cool button on CodePen that rotates and grows when hovered over using HTML/CSS. I want to incorporate this button into my JavaFX GUI, built with SceneBuilder and FXML files. The GUI currently features buttons numbered 1-4, and I wo ...

javahtmlcssjavafxfxml

PHP overall outcome

I have created a form that includes checkboxes, but I am facing difficulty in calculating the total result based on the selections. Ideally, if a user selects three checkboxes, the total should be $3, and if only one checkbox is selected, the total should ...

phphtml