Question

我最近注意到互联网上的一些页面（如Gizmodo和io9）有一个页面加载动画。在后一种情况下，前一页是灰色的，带有一个小的装载＆＃34;旋转器＆＃34;中间的动画，第二页进来之间没有空白的加载页面，就像互联网上的大多数页面一样。这是怎么做到的？

Answer 1

希望这对你有用......下面的解决方案对我有用，虽然需要jQuery：

首先在body标签后添加：

<div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

然后将div和image的样式类添加到css：

#loading {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: fixed;
  display: block;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
  text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

最后将此javascript添加到您的页面（最好在页面末尾，然后在关闭body标签之前）：

<script language="javascript" type="text/javascript">   
$(window).load(function() {
$('#loading').hide();   }); 
</script>

然后通过样式类调整加载图像的位置和加载div的背景颜色。

这就是它，工作正常。但是当然你必须在某个地方有一个ajax-loader.gif。

尝试AJAXLoad他们有一些很棒的动画GIF .. :)

Answer 2

我没有看过引用的网站，但它听起来像是一个jQuery候选者。

您使用ajax调用来获取页面内容，然后将其加载到当前DOM中，以替换当前显示的内容。

jQuery框架具有动画和插件，可显示您描述的行为。我喜欢的是ColorBox（http://www.jacklmoore.com/colorbox）。

制作页面过渡动画

2 个答案: