Javascript - Sayfanın geri kalanı önce bir resmi yükle

Question

Şu anda bir web sitesi yapıyorum ve başlık olarak bir resme sahip değilim, ancak sayfayı yüklediğimde sayfanın yarısına kadar atlayacağım, resmi yükleyeceğim ve sonra zıpla yedekleyin. Zıplamayı önlemek için ilk önce görüntü yükünü nasıl yapabilirim?

HTML: Bir JSFiddle bu çoğaltmak için Buraya

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

bu.

Önceden teşekkür ederiz.

Answer 1

Bunun için iki şeyden birini yapabilirsiniz.

1) Resminizin boyutlarını satır içi olarak ayarlayın. Bu aslında, görüntülerin yüklendikten sonra sayfanın etrafında dolaştığı durumları engellemeniz için önerilen bir yöntemdir. Boyutları satır içi olarak ayarlayarak, tarayıcı resmin ne kadar uzun olması gerektiğini önceden bilecek ve daha önce bunun için yer ayırmayacaktır. hatta içinde yüklenmesi bitene

Örnek:.

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

2) satır içi boyutlarını ayarlamayı tercih etmezseniz, o da sadece zaman ve o önde tarzlarda yüksekliğini ayarlayabilirsiniz görünüyor hile de yapardı.

Örnek:

.refocus-img{ 
    height:150px; 
}