javascript - 当 block 在视口(viewport)上加载时显示加载(占位符)图像

Question

我一直在寻找这个问题的答案，但总是找到一个不能完全解决我的问题的答案。

我想在实际加载 div 内容之前显示“正在加载”图像 4 秒。我无法弄清楚。

HTML

<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)上的 block 加载并显示加载器图像几秒钟时，有什么方法或 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在您的叠加层上。