Preloading images before CC - per souders
-
28-09-2019 - |
Question
I saw a PPT from steve souders about loading images before the css for a similar situation that i need.... but im not clear on what the actual code is to do this. I assume he loaded something before the css and in his ppt he says this
new Image().src = "http://webcelerity.com/blog/wp-content/themes/carrington-blog-faster/images/sprite.png
but it would be awesome if someone can show me what the doc head would actually look like
for ref; here is the ppt
thanks for your help in advance
Solution
The method of preloading images has been around for ages, first time I had seen it was when I used Dreamweaver MX to do rollover effects.
Using that method you can parallelize download of the images and cache them in the browser (without the need of actually displaying them at that moment).
Regarding your question, the head of the document would look something like:
<script type="text/javascript">
var images = ['img1.jpg', 'img2.jpg'];
for(var i = 0, len = images.length; i < len; i++) {
new Image().src = images[i];
}
</script>
<link rel="stylesheet" type="text/css" href="your_css_file.css" />