Question

我已经搜索了这个问题的答案，但总能找到一个并不能完全解决我问题的答案。

我希望在实际加载div的内容之前显示“加载”图像4秒。我无法理解。

<div class='main-slider'>
<div> <!-- Content -->
<img src="http://4.bp.blogspot.com/-gk6rnMRH9qE/VXJ40BWuC4I/AAAAAAAABZs/BWesiVwBgfg/s1050/camera-girl-nikon-photography-Favim.com-205093.jpg"/>
</div>
</div> <!--main-slider end-->

我想像this example site这样做。在这个网站上，当一个块在Viewport上显示加载并显示加载器图像几秒钟时，是否有任何方法或jQuery插件来执行此操作。

Answer 1

所以，你首先要给你的容器div position: relative;。然后，您需要在容器中添加div，让我们说<div class="overlay"></div>。你的叠加层的CSS就像......

.overlay {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

然后，用一点js（我在这里使用了jquery）......

$(window).load(function(){
    $('.overlay').fadeOut();
});

修改：您可能还需要在叠加层上使用z-index。

在视口上加载块时显示加载（占位符）图像

1 个答案: