4

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

4
  • It still loads it, it just removes it from the document flow i.e. hides it.
    – adeneo
    Mar 22, 2013 at 8:13
  • Yes, it's still loaded in the DOM
    – George
    Mar 22, 2013 at 8:13
  • 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 Mar 22, 2013 at 8:14
  • thanks, I thought so but was not sure Mar 22, 2013 at 8:17

6 Answers 6

3

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.

9
  • thank you for your answer...any specific ajax call/plugin whatever(don't know ajax) I should be looking at? Mar 22, 2013 at 8:20
  • awesome, this is what I was looking for...One more question: Can I specify any html inside the 'value' values? And the (html) will be the data defined inside the ajax call right? Mar 22, 2013 at 8:34
  • if you want to pass some parameter from the client to server to fetch the required data it passed using the data option. Mar 22, 2013 at 8:36
  • the done function gets called when the ajax request is completed successfully, and the html parameter passed to it is the response sent from the server Mar 22, 2013 at 8:37
  • I see, but still not sure what the param values are suppose to be? Mar 22, 2013 at 8:39
2

To your question, yes,CSS Display:none loads all content inside the DOM. The better idea to minimize loading time is to use AJAX. Initially, the hidden contents should not be loaded. When user request to see the hidden content, by the use of ajax (I prefer jQuery AJAX), the content should be loaded. This will reduce page loading. However, there may be some loading delay due to AJAX request.

2
  • cool, but the ajax loading will be faster than normal loading when not using ajax? Mar 22, 2013 at 8:18
  • yes, in ajax loading only certain part is loaded. but in case of normal loading, whole content has to downloaded which is obviously more time consuming. Mar 22, 2013 at 8:20
1

The browser still downloads all of the HTML that is hidden. The normal pattern for what you are doing is to load the other content via AJAX and then display it.

4
  • thank you for your answer...any specific ajax call/plugin whatever(don't know ajax) I should be looking at? Mar 22, 2013 at 8:19
  • Many people use jQuery for AJAX, but you can write it using plain JavaScript too.
    – Fenton
    Mar 22, 2013 at 8:21
  • Oh i see...so I just append the new 'hidden' data into the appropriate div once I want to call it with button click or whatever...But in that case, the hidden data needs to be specified in the jquery function and the browser still loads that right? Mar 22, 2013 at 8:24
  • That's right - although if you know they are in step 1 of a wizard (for example) you don't have to wait for them to ask for step 2 before you go and get it - you could sneak off in the background and get it while they are filling in step 1 and it would appear instant.
    – Fenton
    Mar 22, 2013 at 8:28
1

When your page load all the HTML content load even if it's hide . it's just hide not removed.

So better to load content via Ajax and displaying it where you want to display.

2
  • thank you for your answer...any specific ajax call/plugin whatever(don't know ajax) I should be looking at? Mar 22, 2013 at 8:22
  • Instead of load new page , you can set page link and after click on page link that page is display using jquery where you want load. Mar 22, 2013 at 8:27
0

browser loads all divs either they display or not. if you want to load your site fast please remove unwanted div or hide div from the content

0

Css cannot alter dom. Following is the browser process

  • Construct dom from html
  • Construct cssom(css object model) from css
  • Construct render tree from dom and cssom

Hence css can only change render tree which will be displayed on the browser.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.