I want the browser to not do the parsing and preliminary rendering or drawing of the “hidden” HTML until I am ready to show it so that I can quickly display the minimum set of content if the browser only performs the rendering of the visible parts.
I am looking for maximum render / draw speed on page load.
My current HTML:
<div id="stuff">
<div class="item">
<div class="visible">
<h1>Item 1</h1>
<a class="details" href="javascript:void(0)">Show more</a>
</div>
<div class="invisible">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elit mi, bibendum a imperdiet sed, imperdiet id leo. Mauris vulputate tellus id metus euismod, eget gravida libero ultricies.</p>
<img src="/img/1.jpg" alt="" />
</div>
</div>
<div class="item">
<div class="visible">
<h1>Item 2</h1>
<a class="details" href="javascript:void(0)">Show more</a>
</div>
<div class="invisible">
<p>Vestibulum tristique fermentum dui, et pretium elit. Ut purus lacus, mattis vitae leo vel, congue mollis mi. Aliquam erat volutpat. Vestibulum luctus, purus ut mattis ullamcorper, justo odio ultrices dolor, nec porta purus turpis sed orci. Aliquam orci sapien, dictum sed facilisis molestie, tempus in orci.</p>
<img src="/img/2.jpg" alt="" />
</div>
</div>
... and so on...
</div>
The actual “invisible” content is MUCH more significant than in this example, and there are 50 “elements” on the page.
My external CSS:
.invisible {
display: none;
}
Will the display: noneexternal style sheet prevent the browser from pre-rendering hidden content?
, ? div = "display: none"?
!