Question

What would be a good way to show hidden content with javascript, without having the image elements <img src="myimage.jpg"> of the hidden content load their images in google chrome or any other browsers until the content is actually shown?

hiding the content with the css rule display: none will not prevent the images from loading, and I would like to avoid using ajax calls.

Answer 1

EDIT 1 as discussed in the comments, a better alternative would be to use a template. As an example I picked John Resig’s Microtemplating engine:

<div id="content_container">
    <script type="text/html" id="content">
        <div>
            <img src="..."/>
        </div>
    </script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = tmpl('content', {});">show div</button>

See fiddle

EDIT 2

As the original poster commented, it’s perfectly possible to grab the contents of a <script type="text/html"> element. Templating engine’s not necessary:

<div id="content_container">
    <script type="text/html" id="content">
        <div>
            <img src="..."/>
        </div>
    </script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = document.getElementById('content').innerHTML;">show div</button>

First Answer

(see in edits)