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

Question

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? 无论如何，我是否可以延迟HTML代码（页面）的显示，直到加载某些特定图像，以便布局与标题图像以及HTML一起显示？

Thank you. 谢谢。

Answer 1

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... 注意：使用display = 'none'不能在我的Opera Opera 10.10中运行，因为onload将立即触发...

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>

Answer 2

I share Christoph's opinion, that a page should be shown to the user as fast as possible--even just parts of the page. 我同意克里斯托夫（Christoph）的观点，即应该尽快将页面显示给用户-即使只是页面的一部分。 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. 加载所有图像，脚本，样式表和多媒体文件后，将显示该页面。

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

问题描述

2 个解决方案

解决方案1
3 已采纳 2010-09-30 16:59:08

解决方案2
1 2010-09-30 16:59:48

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

问题描述

2 个解决方案

解决方案1 3 已采纳 2010-09-30 16:59:08

解决方案2 1 2010-09-30 16:59:48

解决方案1
3 已采纳 2010-09-30 16:59:08

解决方案2
1 2010-09-30 16:59:48