Css: no mapping. It is expensive?

I decided to make the function read further ... by having two div s and setting one of them display: none but in this case I save all the data twice. Now the question is


If I have one div element, with style="display:none" that contains a lot of large images in it, does this affect the page opening time?

+4
source share
2 answers

display:none does not prevent the loading of hidden content with the rest of the page.

If you want to make the page β€œeasier” during loading, you can download the β€œread more ..” content via Ajax upon request.

+12
source

Images will be captured immediately 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 can insert images into the DOM only by clicking the read more... button, 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); 
+4
source

Source: https://habr.com/ru/post/1307158/


All Articles