Javascript - ページの残りの部分の前に画像をロード

Question

私は現在ウェブサイトを構築していて、ヘッダーとして画像を持っていますが、ページをロードするとページの半分にジャンプし、画像をロードしてジャンプしますバックアップ。最初に画像を読み込んで飛び越さないようにするにはどうしたらいいですか？

HTML：

<div class="refocus" id="hero-header"> 
    <div class="refocus-img-bg"></div> 
    <div class="refocus-img focus-in"> 
    HTML: 
    </div> 
    <div class="refocus-text-container"> 
    <div class="t"> 
     <div class="tc"> 
     </div> 
    </div> 
    </div> 
</div> 
     <div class="row"> 
      <div class=".col-md-6"> 
       <div id="section1"> 
        <div id = "sub-text"> 
         <h1>Hello</h1> 
         <br> 
         <h2>Hello</h2> 
         <h3><br>Hello.</h3> 
        </div> 
        <div id="image"> 
         <img src="images/aboutme.png"/> 
        </div> 
       </div> 
       <div id="buttoncontainer"> 
        <div id="totimeline"><a href="#" class="btn btn-success btn-large">&#x25BC;</a></div> 
       </div> 
      </div> 
     </div> 

はここで、これを複製するJSFiddleです。

ありがとうございます。

Answer 1

これのために2つの方法のいずれかを実行できます。

1）イメージの寸法をインラインに設定します。これは、実際にイメージがロードされた後にページがどこにジャンプするのかを防ぐための推奨方法です。サイズをインラインに設定すると、ブラウザはイメージの高さを知っていて、前にスペースを確保しますそれも中にロードが完了

例：。

<img src="http://placehold.it/350x150" height="150" width="350"> 

2）あなたはインライン寸法を設定することを好むしていない場合、あなたがまた、直前の時間のあなたのスタイルで高さを設定していることができそうですトリックもやります

例：

.refocus-img{ 
    height:150px; 
}