0

I make vast use of CSS sprites and background images in general - all via CSS.

Now, using Firebug's network panel I see that the loading of these CSS background images starts only after these steps:

1) loading and parsing of the HTML document

2) loading the CSS files

Which looks like this: http://www.umdiewelt.de/tmp/network_withoutIMG.JPG

So I included the following to see what happens:

<img src="http://cdn.umdiewelt.de/images/layout/c_bgBody.jpg" style="display:none" />
<img src="http://cdn.umdiewelt.de/images/layout/c_bgHeader.jpg" style="display:none" />
<img src="http://cdn.umdiewelt.de/images/c_miscSpriteScreenBasic.png" style="display:none" />

Note, that the images are set to display:none.

Now these downloads start earlier: http://www.umdiewelt.de/tmp/network_withIMG.JPG

Is this good coding practice or just crap? It's certainly an overhead of unused HTML, but is it a valid way to preload CSS sprites?

Eddie
  • 109
  • 1
  • 11

1 Answers1

0

This article points out a number of effective ways to preload images, of which I would the first variation of the second approach.

http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

In your case you could use this (modified from example in article to fit use case)

<div class="hidden">
    <script type="text/javascript">
        <!--//--><![CDATA[//><!--
            var images = new Array()
            function preload() {
                for (i = 0; i < preload.arguments.length; i++) {
                    images[i] = new Image()
                    images[i].src = preload.arguments[i]
                }
            }
            preload(
                "http://cdn.umdiewelt.de/images/layout/c_bgBody.jpg",
                "http://cdn.umdiewelt.de/images/layout/c_bgHeader.jpg",
                "http://cdn.umdiewelt.de/images/c_miscSpriteScreenBasic.png"
            )
        //--><!]]>
    </script>
</div>
Corban Cloud
  • 11
  • 1
  • Thank you for the answer, that was interesting to read! But it didn't really solve my problem - just took it to another level. I don't need to preload files to use them LATER, I need them as soon as possible instead. But I think my problem solved itself: I ran some comparisons between my two approaches: it turns out, that yes, the file download starts earlier, but for reasons I didn't really understand, the whole page load time stayed approximately the same :-/ Here's an article that I found extremely helpful: http://www.softwareishard.com/blog/firebug/page-load-analysis-using-firebug/ – Eddie Apr 10 '14 at 18:07