Question

无论如何，我可以延迟显示HTML代码（页面），直到加载某些图像，以便布局显示标题图像以及HTML？

谢谢。

Answer 1

这应该做到，但是你有责任保护客户免受自己的侵害 - 毕竟，你是专业人士......

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

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

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

注意：使用display = 'none'代替我的（有点旧）Opera 10.10，因为onload会立即触发...

此外，这将延迟显示页面，直到所有外部资源都已加载。如果您只想等待某些图像，则需要更复杂的脚本（未经测试）：

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

Answer 2

我同意Christoph的观点，即应尽快向用户显示页面 - 甚至只是页面的一部分。如果似乎没有任何事情发生，这很烦人。

但你可以试试

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

（或者也可以工作

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

？ - 需要尝试）

在加载所有图像，脚本，样式表和多媒体文件后，将显示该页面。

XHTML JavaScript在加载页面的其余部分之前预加载图像

2 个答案: