CSS Display:none - Does it still load all content inside the DOM?

Question

Good Day

Question: When giving the property

display: none;

to a div, will the browser still load all its contents? Or only once you display it?

What I want to achive is combining a lot of web pages into one, and instead of directing the user to a new page everytime, I just display the div(which was hidden on page load) relating to the item he clicked on..

Now my question is, when having all these hidden divs, which were were previously content on separate web pages, will it slow down the overall initial page load or will it not affect it, since the divs are hidden and only loaded and displayed when called?

---

My knee jerk reaction is that the browser loads everything served by the server, and then just hides the div when it receives the css rule...loading is already done

In that case, how can you efficiently keep the user on one page but minimize loading time because of all the content?

UPDATE: So I can use Ajax or just jQuery to add content I don;t want loaded initially right? But if I use jQuery, the content still needs to be defined within the jQuery function and that is loaded initially as well...?

here is a scenario:

HTML(initial)

<div>
inital content that I want loaded initially
<a>Action to call hidden content I don't want loaded initially<a/>
</div>

jQuery:

$('div a').click(function(){
   $('div').append('<div>new content that I don;t want loaded initially....</div>');
});

However, the new content above will still be loaded since it is in the jQuery model...

Am I having this wrong here?

Thank you

Answer 1

in case of an html page, the entire page is served by the server when the request is made, then while rendering the browser simply hides it.

If you want a delayed loading you may have to look at AJAX technology.

Using ajax you can load the content as and when you need and then add it to the dom.

Instead of using the raw AJAX API provided by the browser, you can look at libraries like jQuery which provides cross platform support form making ajax calls and dom manipulations

Ex:

$.ajax({
    url: 'my-content-url',
    method: 'GET'
}).done(function(html){
    $('#my-container').html(html)
})

This example makes a ajax call to my-content-url and on successful completion, the returned html is added to the element with id my-container.