I'd like to have my main brand image load immediately. I've found something that works, but wonder if it might be bad practice.
Is there any downside to putting mark up with image tags inside the head tag?
It does have the effect I'm looking for.
I tried link prefetching but that didn't do anything for me. My main objective is to get the images loading before the blocking css. Which this does seem to accomplish.
<head>
<title>My Page</title>
<div id="preload" style="position: absolute; top:-999999px;">
<img src="/images/mainimage.png" />
<img src="/images/nav/a.jpg" />
<img src="/images/nav/b.jpg" />
<img src="/images/nav/c.jpg" />
<img src="/images/nav/d.jpg" />
<img src="/images/nav/e.jpg" />
<img src="/images/nav/f.jpg" />
</div>
....