2014-01-16 51 views
1

我的加載時間對於小網站來說非常慢,我做錯了什麼。
我的意圖是在視頻加載之前有一個圖像展示/ * ,但圖像在視頻的同一時間加載,即使需要永久加載。如何增加bigvideo.js的加載時間?

我的html:

<div id="bigvid"> 
    <div class="img"> 
    <div id="header"> 
     <div class="inner presentation" style="z-index: 999; height: 100%"> 
     <header> 
      <h1 style=" 
      font-size: 100px; 
      line-height: 65px; 
      letter-spacing: 12px; 
      font-weight: 900; 
      margin: 26px 0; 
      color: #f5f4ed; 
      "> 
      hibidabibi 
      </h1> 
      <hr> 
      <span class="byline" style=" 
      font-size: 48px; 
      line-height: 65px; 
      letter-spacing: 12px; 
      font-weight: 900;    
      margin: 26px 0; 
      color: #f5f4ed; 
      "> 
      Coming Soon 
      </span> 
     </header> 
     <footer> 
      <ul class="icons"> 
      <li><a href="#" class="icon icon-twitter"><span>Twitter</span></a></li> 
      <li><a href="#" class="icon icon-youtube"><span>Facebook</span></a></li> 
      <li><a href="#" class="icon icon-instagram"><span>Google+</span></a></li> 
      </ul> 
     </footer> 
     </div> 
    </div> 
    </div> 
</div> 

我的CSS

#bigvid { 
    position: absolute; 
    background-color: #000; 
    height: 100%; 
    width: 100%; 
    z-index: 100; 
    background-image: url('../images/screenshot.jpg'); 
} 

看到http://impulse1.github.io/Test/以供參考。

回答

0

你需要100%身高。背景圖像正在加載,只是沒有內容,直到視頻加載。一旦視頻加載它填充div,並在div div resizing和視頻填充之間的分裂秒,你會看到你的背景圖像。

+0

非常感謝這個修復它,關於如何在vid加載之前加載圖像並保持原位的任何提示? – user3200978

0

我會把一個更大的視頻在那裏,看看如果這是真的。老實說,我可以在視頻開始前一秒左右看到佔位符圖像。

如果您使用chrome ..請按f12加載開發工具。然後切換回瀏覽器。點擊您網站上的刷新按鈕,但按住鼠標按鈕,當菜單出現時,選擇最後一個選項 - 「空緩存和硬重載」。

您可能現在只是緩存的受害者。

+0

我認爲它在chrome中工作得很好,現在的問題在於firefox。加載時間是可怕的,但我肯定會嘗試 – user3200978