5617


現在WEBページを運営しておりますが、初回読み込み時に背景→テキスト→画像の順番で表示されます。  
テキストはWeb
Fontで、画像はjQueryを使用していますので、個人的には納得（CDNとキャッシュを利用して２回目以降の読み込みはいたって快適）していたのですが「せめてヘッダー画像だけでも先に表示できないか」との要望を受けてしまい現在困っております。  
画像の軽量化/最適化やコードの圧縮なども行っております。  
他に何か有効的な方法がございましたらご教授お願いいたします。

使用CMS：WordPress  
ヘッダー：スライダー(Rev Slider)


CC BY-SA 3.0
2015-01-29T17:02:40.010
5584
2015-01-30T21:45:34.210
2015-01-30T21:45:34.210
76
7887
question
javascript jquery html5
画像要素を他の要素より先に表示させる方法


Data URI スキームを用いるのはどうでしょう。Data URI スキーム では `img` 要素の `src`
属性の中に、直接画像データを書き込みます。よって HTML
がブラウザに読み込まれる時に同時に読み込まれるため、かなり初期に表示されると期待できます。ただし画像データを埋め込む分、HTMLのサイズは大きくなります。加えて、何を最初に表示するかはブラウザの実装に依存しますので、絶対とは言えません。

実際の例は [インラインで画像をHTMLに埋め込むData
URLスキーム](https://www.softel.co.jp/blogs/tech/archives/2117) を見れば、Data URI スキーム
がどういったものかは即座に理解できるでしょう。

仕様については Wikipedia の [Data URI
scheme](http://ja.wikipedia.org/wiki/Data_URI_scheme) が参考になります。また
[画像をdataURL(MIME Type + base64文字列)に変換する](http://hi0a.com/demo/img-
base64-datauri/) のように、画像をData URIへ手軽に変換するWebアプリもあります。


CC BY-SA 3.0
2015-01-29T22:11:14.790
5587
2015-01-29T22:11:14.790
208
5584
answer


image.onload イベントを使えないでしょうか。  
ページをヘッダー部分とそれ以外に分け、ヘッダー画像の読み込みが終わったら、残りの部分を表示します。

[code]

    <body>
    
      <img id='img'> 
      <script>
        var img = document.getElementById('img');
        img.onload = function () {
          //alert('ヘッダー画像読み込みました');
          // ヘッダー画像を読み込んだら残りを表示
          document.getElementById('main').src = 'main.html';
        }
        img.src = 'header.png';
      </script>
    
      <iframe id='main' />
    
    </body>
    
[/code]


CC BY-SA 3.0
2015-01-29T23:39:10.817
5588
2015-01-29T23:39:10.817
3925
5584
answer


読み込み時の表示順をコントロールする場合。  
後から表示させたいものは初期表示を全て非表示にしておいて  
ロード完了(onload等)のイベントをトリガーにして  
順次表示させていくと好きな順番に出来ます。

慣れたら色々と 応用が効きますよ。

[code]

    <!DOCTYPE html>
    <html>
    <head>
    <title>サンプル1</title>
    <style>
    .main_off {
     display: none;
    }
    .main_on {
     display: block;
    }
    </style>
    <script>
    function main_on(){
     document.getElementById('main').className = "main_on"; 
    }
    </script>
    <noscript>
     <style>
      .main_off { display: block; }
     </style>
    </noscript>
    </head>
    <body>
    
    <header>
    <!-- 画像のonloadイベントで本文のcssを変更 -->
    <img src="abcd.jpg" onload="main_on();" />
    </header>
    
    <section id="main" class="main_off" >
    本文
    </section>
    
    </body>
    </html>
[/code]


CC BY-SA 3.0
2015-01-30T09:23:13.510
5617
2015-01-30T09:23:13.510
5479
5584
answer