css: display none. Is it expensive?

Question

I decide to make read more... function by having two divs, and setting one of them display: none but in this case i store all the data twice. now the question -

---

If I have one div element, with style="display:none", which contains many big size images in it, is it have an influence on page opening time?

Answer 1

display:none does not prevent the hidden content from being loaded with the rest of the page.

If you want to make the page "lighter" at load time you can load the "read more.." content via Ajax on-demand.

Answer 2

The images would get fetched immediately even when the parent div is set to display: none.

If this is not your intention, and you do not want to go with the AJAX route, you may want to insert the images into the DOM only when the read more... button is clicked, as in the following example:

var hiddenDiv = document.getElementById("your-hidden-div-id");
var imageToLoad = document.createElement("img");

imageToLoad.setAttribute("src", "image1.png");

hiddenDiv.appendChild(imageToLoad);