0

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

谢谢你。

4

2 回答 2

3

应该这样做，但保护客户免受自身伤害是您​​的责任 - 毕竟，您是专业人士......

<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>
于 2010-09-30T16:59:08.457 回答
1

我同意 Christoph 的观点，即应该尽快向用户显示页面——即使只是页面的一部分。如果似乎什么也没发生，这很烦人。

但是你可以试试

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

（或者也可以工作

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

? --需要尝试）

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

于 2010-09-30T16:59:48.030 回答