为什么我的图像在加载时最初会掉落

Question

我有一个网页。

在2x2网格中有4个img控件。

当我加载图像时，它最初加载如下：

左下图像被删除。

它最终会在一秒左右之后加载......

这是我的标记：

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

（我正在使用BootStrap）

Answer 1

您未使用.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">

Answer 2

我不确定为什么在装载时它会使容器变形，但您可以尝试预加载它们。

我通常会像这样使用CSS预加载。

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

如果路径与在这些屏幕外ID中调用的路径相同，则它们似乎都会加载在一起。