Home/ Questions/Q 1112449
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T02:42:42+00:00

Is there anyway I can delay the display of the HTML code (page) until

  • 0

Is there anyway I can delay the display of the HTML code (page) until some certain images are loaded so that the layout appears with the header images as well as the HTML?

Thank you.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0