ansaurus

Question

XHTML JavaScript preload images before rest of page is loaded

Answer 1

+2 A:

This should do it, but it's your responsibility to protect the clients from themselves - after all, you're the professional...

<head>
 <script type="text/javascript">
//<![CDATA[
with (document.documentElement.style) {

  visibility = 'hidden';
  overflow = 'hidden';

  window.onload = function() {
    visibility = '';
    overflow = '';
  };
}
//]]>
 </script>
</head>

note: using display = 'none' instead doesn't work in my (somewhat old) Opera 10.10 as the onload will fire immediately...

Also, this will delay displaying the page until all external resources have been loaded. If you only want to wait for certain images, you'll need a more sophisticated script (untested):

  <head>
  <script type="text/javascript">
//<![CDATA[
document.documentElement.style.display = 'none';
//]]>
  </script>
 </head>
 <body>
  <img stc="…" width="…" height="…" alt="…" class="preload">
  <!-- page contents… -->
  <script type="text/javascript">
//<![CDATA[
(function() {
    var remaining = 0;

    function listener() {
        if(!--remaining)
            document.documentElement.style.display = '';
    }

    for(var i = 0; i < document.images.length; ++i) {
        var img = document.images[i];
        if(/(^|\s)preload(\s|$)/.test(img.className) && !img.complete) {
            ++remaining;
            img.onload = listener;
            img.onerror = listener;
        }
    }
})();
//]]>
  </script>
 </body>

Christoph 2010-09-30 16:59:08

Thank you Christoph and thanks everyone for all your very helpful input.

Francisc 2010-09-30 20:10:42

I have decided NOT to do this after reading all that was said and seeing that such a solution would imply hiding and showing the body, I was hoping there was a more elegant way which there isn't. Again, thank you, much appreciated.

Francisc 2010-09-30 20:11:53

Answer 2

+1 A:

I share Christoph's opinion, that a page should be shown to the user as fast as possible--even just parts of the page. It is annoying if nothing seems to happens.

But you can try

<body id='body' style='display:none;' 
      onload="document.getElementById('body').style.display='block';">

( or does also work

<body style='display:none;' onload="this.style.display='block';">

? -- need to try)

That would display the page after all images, scripts, stylesheets, and multimedia files are loaded.

Jan 2010-09-30 16:59:48

afaik some browsers don't load images if they are `display:none` - use `visibility` instead (please confirm); also, your quotes don't nest correctly

Christoph 2010-09-30 17:06:08

I just tried with firefox 3.5, Chrome 6, MSIE8. I used an image with onload, and it worked on them (with display:none on body). But I advice against this.

some 2010-09-30 17:09:57

And if the image for some reason isn't loaded, the page will not be visible since there isn't an onload-event.

some 2010-09-30 17:18:49

I corrected my quotes--thanks Christoph.

Jan 2010-09-30 17:18:53

I prefer Christoph's solution since it wouldn't 'destroy' anything if JavaScript isn't available.Here we should use something like `<body id='body' onload="..."><script ...>document.getElementById('body').style.visibility='none';</script>` ... That would be a mess. And we still might have that problem that `onload` is never called, as some mentioned.

Jan 2010-09-30 17:19:55

@some: thanks; according to my google-fu, at least Netscape 6 and Opera 8 did not load `display:none` images, but this doesn't seem to be a problem any longer...

Christoph 2010-09-30 17:20:39

ansaurus

tags:

views:

answers:

XHTML JavaScript preload images before rest of page is loaded

related questions