为什么我的图片在加载时最初丢失

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

为什么我的图片在加载时最初丢失

回答

相关问题