爲什麼我的圖片在加載時最初丟失

它有4個img控件ina 2x2網格。

當我加載圖片它最初加載這樣的：

enter image description here

左下方的圖像被丟棄。

它最終加載這樣的後一秒鐘左右......

enter image description here

這是我的標記：

<div class="text-center vcenter" style="width: 100%;overflow:hidden "> 
     <div class="container2" id="row11" style="width:360px;overflow:hidden"> 
      <div id="col11" class="col-xs-12"> 
       <div id="Live" style="width: 360px;"> 
        <div class="text-center vcenter" id="row1" style=""> 
         <div id="col1" class="col-xs-6" style="padding-right: 0px; padding-left: 0px; align-items: stretch; width: 180px;"> 
          <a href="#" style="margin-left: 0px; margin-right: 0px;"> 
           <img id="img1" alt="" class="img-responsive " /> 
          </a> 
         </div> 
         <div id="col2" class="col-xs-6" style="padding-right: 0px; padding-left: 0px; width: 180px;"> 
          <a href="#" style="margin-left: 0px; margin-right: 0px;"> 
           <img id="img2" alt="" class="img-responsive " /> 
          </a> 
         </div> 
        </div> 

        <div class="text-center vcenter" id="row2" style=""> 
         <div id="col3" class="col-xs-6" style="padding-right: 0px; padding-left: 0px; width: 180px;"> 
          <a href="#" style="margin-left: 0px; margin-right: 0px;"> 
           <img id="img3" alt="" class="img-responsive " /> 
          </a> 
         </div> 
         <div id="col4" class="col-xs-6" style="padding-right: 0px; padding-left: 0px; width: 180px;"> 
          <a href="#" style="margin-left: 0px; margin-right: 0px;"> 
           <img id="img4" alt="" class="img-responsive " /> 
          </a> 
         </div> 
        </div> 

       </div> 
      </div> 
     </div> 
    </div>

（我用的自舉）

來源

2014-12-07 Andrew Simpson

你」沒有使用.row：

<div class="text-center vcenter" id="row1" style="">

應該

<div class="row text-center vcenter" id="row1">

，同樣

<div class="text-center vcenter" id="row2" style="">

應該

<div class="row text-center vcenter" id="row2">

來源

2014-12-07 19:40:43 Mooseman

我是一個白癡:)謝謝（將在5分鐘內接受） – 2014-12-07 19:43:45

@AndrewSimpson謝謝！ – Mooseman 2014-12-07 19:44:33

我不知道爲什麼它加載當的變形的容器，但你可以嘗試預加載它們。

我通常使用CSS這樣預加載。

#pre1 { background: url(Img1.jpg) no-repeat -9999px -9999px; } 
#pre2 { background: url(Img2.jpg) no-repeat -9999px -9999px; }

如果路徑與這些屏幕標識中所調用的路徑相同，則它們將全部加載在一起。

來源

2014-12-07 19:42:15 DevDonkey

這很有用，但其他答案整理出來 - 謝謝 – 2014-12-07 19:44:03

很高興你把它修好:) – DevDonkey 2014-12-07 19:45:10

爲什麼我的圖片在加載時最初丟失

回答

相關問題