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

また、これにより、すべての外部リソースが読み込まれるまで、ページの表示が遅れます。特定の画像のみを待ちたい場合は、より洗練されたスクリプト ( 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>
于 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 に答える