Javascript jQuery调用的CSS3加载屏幕？

在为iOS测试我的web应用程序时，我注意到CSS3动画是硬件加速的，我想将加载屏幕切换到CSS3动画

加载屏幕是一个简单的

div

，覆盖屏幕：

.loading{
position:fixed;
top:0;
left:0;
right:0;
bottom: 0;
z-index: 10;
background-color:#000;
display: none;
}

我的页面内容是通过AJAX加载的。加载

div

将在页面加载时以及再次发出请求时显示（因此将重新加载AJAX请求，更新内容）。我这样做的方式是：

$('.loading').show()

在完成AJAX请求之前，先执行

$（'.loading'）.fadeout（）

然后，通过“重新加载”按钮，我进行了以下设置：

$("#reload").on("click", function() {
    $('.loading').fadeIn()
    doAjax("http://google.com");
    $('.loading').delay(300).fadeOut()
});

这样，当重新加载请求时，它将在加载屏幕中淡出，加载AJAX内容，等待300毫秒，然后淡出

div

现在，什么是最好的方式来转移这一切到CSS3动画？我在早些时候（由Duopixel）帮助解决了这个问题，他能够做到这一点：

该解决方案的问题是：

页面加载时不显示

div

。这意味着在显示加载屏幕之间有几秒钟的延迟

重新加载AJAX请求时，加载屏幕不会消失。它只是显示，然后消失

如果有人对如何解决这些问题有任何想法，或者有更好的解决方案，那就太好了。

---

操作1：启用淡入

通过删除.loading.animated类中的转换，您的淡入问题将得到解决

操作2：启用3秒延迟淡出

要添加3秒延迟，我只需将removeClass放入setTimeout中：

setTimeout(function(){
    $('.loading').removeClass("animated");
},3000);

如果您喜欢以jQuery样式执行此操作，可以使用以下方法：

$('.loading').delay(3000).queue(function(next){
    $(this).removeClass("animated");
    next();
});

操作3：在页面加载中禁用淡入效果

要在开始时禁用淡入，我应用了一个技巧，添加了新的class.firsttime到div，它禁用了动画，然后在Ajax调用后将其删除，因此除了第一个调用之外，所有其他调用都将具有淡入；）

操作4：启动时立即显示加载

为了显示加载，我第一次在html中添加了.animated类到您的div中，这样它就会立即显示出来，而不会等待JavaScript

操作5：删除启动时的3秒延迟

为了不延迟第一次加载，我在doAjax函数中添加了一个属性来检查它是否是第一次加载，如果是，则删除该类。否则，添加3秒延迟，然后删除该类

更新的JSFIDLE:

---

我希望这能解决您的所有问题：-）

谢谢您的回复。问题是，我不希望页面加载时原始div淡入。我只想让它淡出。另外，在重新加载屏幕上没有延迟。编辑很棒，在：）中添加了延迟，但它仍然对加载时发生的动画应用延迟和淡入淡出，这是我不希望发生的。我应该使用秒加载屏幕吗，或者有更好的方法吗？我更新消息以支持3秒的淡出延迟。我还运用了一个技巧来避免第一次褪色：-）完美；我觉得延迟仍然适用于原始加载屏幕吗？你能用这个技巧只把它附加到重新加载屏幕上吗？我只是更新了我的答案：-）我修正了显示加载的启动延迟以及3秒延迟！请不要犹豫要求任何其他更改，我将非常乐意提供帮助。也许这会有所帮助，CSS3：