1

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>

  ....
dgig
  • 3,977
  • 2
  • 30
  • 44
  • 1
    See this: https://stackoverflow.com/questions/3469587/will-an-html-image-tag-execute-in-the-head-tag – martriay Sep 18 '16 at 23:58
  • Ah perfect, thank you. Perhaps this should be closed as a duplicate. – dgig Sep 19 '16 at 00:00
  • not necessarily, your post is about bad practices – martriay Sep 19 '16 at 00:03
  • @martriay I think your post really answered it - no bad practice, but don't expect it to work reliably as the spec is clear that anything can be done with those elements. From load immediately, to ignore completely. that said, it does a fine job for my situation... – dgig Sep 23 '16 at 18:55

1 Answers1

0

I think doing a prefetch would be a better option. For instance:

function preloader() {
if (document.images) {
    var img1 = new Image();
    var img2 = new Image();
    var img3 = new Image();

    img1.src = "http://domain.tld/path/to/image-001.gif";
    img2.src = "http://domain.tld/path/to/image-002.gif";
    img3.src = "http://domain.tld/path/to/image-003.gif";
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
    window.onload = func;
} else {
    window.onload = function() {
        if (oldonload) {
            oldonload();
        }
        func();
    }
}
}
addLoadEvent(preloader);

FYI, not my code, but credit to (and more info) here: https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

Also, not all browsers may interpret this correctly, more about this in this SO post: Will an html image tag execute in the head tag

Wim Mertens
  • 1,670
  • 3
  • 17
  • 27
  • I like this, and would definitely be more standards compliant. But it doesn't seem to make the image load any quicker than having it load at the top of the body tag. I put some logging lines in, and for whatever reason, the preloader function waits to execute until after all the head has loaded (meaning, that blocking css). My guess is it has to do with the window.onload: http://stackoverflow.com/questions/588040/window-onload-vs-document-onload – dgig Sep 19 '16 at 00:16
  • Mmm yes that's true. window.load will wait until the css has loaded. Another way you could do this is to add an inline style at the top of your page and before the main css. You'll need to test it though, not sure if it will make a huge difference. – Wim Mertens Sep 19 '16 at 00:22
  • Thanks for your help. I tried this, but it also seems to hold off on loading until the body loads. It is certainly more compliant than the hack I am trying. – dgig Sep 19 '16 at 00:29
  • One last thing I can think of is using link rel="prefetch" Again, not sure if it makes a big difference. More info here: https://css-tricks.com/prefetching-preloading-prebrowsing/ and http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480001/So-You-Want-To-Pre-Load-Huh.htm – Wim Mertens Sep 19 '16 at 00:38
  • That is very cool, and I do use it to load my slider images. But in this particular case, there is not much advantage. Thanks for your suggestions they are much appreciated! – dgig Sep 19 '16 at 00:43
  • 1
    You might want to have a look at this link as well, for future reference! https://w3c.github.io/preload/ – Wim Mertens Sep 19 '16 at 01:01