你有任何使用jQuery的Ajax加载图片想法吗？

Question

我有一个页面正在加载jQuery。初始加载包括100条记录，每条记录有6个图标。不用说，加载需要几秒钟，我想给用户一个“加载”提示/动画。

任何想法？

Answer 1

http://www.ajaxload.info/是用于生成GIF动画为这样的事情一个很好的资源。

一旦你得到了你的动画，呈现为页面的一部分;在动画的onload（）事件上触发jQuery加载机制（因此您可以确定动画已先加载），并在加载序列结束时使用回调来禁用/隐藏动画GIF。

Answer 2

您可以将带有动画GIF图像的div显示为加载提示。这就是我过去的做法。

Answer 3

我需要的东西，这样我更换，将加载一个简单的，居中的动画某种GIF，上面写着“加载中，请等待”或类似的消息元素的任何时间。如果仅仅是几秒钟，进度指标可能是过度的，但是一个简单的动画可以让大多数人确信，是的，你的网站还在工作。

Answer 4

马特Berseth有a nice jQuery-based way of doing this。

Answer 5

您可能需要建立一个全球性的AJAX事件来显示/隐藏加载图标。看一看：http://docs.jquery.com/Ajax_Events

Answer 6

另一个的ressource加载图片：http://www.loadinfo.net/

Answer 7

你可以做CCS3一个动画，例如，如果你想有一个脉冲：

的HTML标记：

<div class="pulse"></div> 

的CSS：

.pulse { 
    width: 32px; 
    height: 32px; 
    margin: 25% auto; 
    background-color: #303030; 
    -webkit-border-radius: 16px; 
    -moz-border-radius: 16px; 
    -ms-border-radius: 16px; 
    -o-border-radius: 16px; 
    border-radius: 16px; 
    -webkit-animation: scaleout 1.0s infinite ease-in-out; 
    animation: scaleout 1.0s infinite ease-in-out; 
} 
@-webkit-keyframes scaleout{ 
    0%{ 
     -webkit-transform:scale(0) 
    } 
    100%{ 
     -webkit-transform:scale(1); 
     opacity:0 
    } 
} 
@-moz-keyframes scaleout{ 
    0%{ 
     -moz-transform:scale(0) 
    } 
    100%{ 
     -moz-transform:scale(1); 
     opacity:0 
    } 
} 
@-ms-keyframes scaleout{ 
    0%{ 
     -ms-transform:scale(0) 
    } 
    100%{ 
     -ms-transform:scale(1); 
     opacity:0 
    } 
} 
@-o-keyframes scaleout{ 
    0%{ 
     -o-transform:scale(0) 
    } 
    100%{ 
     -o-transform:scale(1); 
     opacity:0 
    } 
} 
@keyframes scaleout{ 
    0%{ 
     transform:scale(0); 
     -webkit-transform:scale(0) 
    } 
    100%{ 
     transform:scale(1); 
     -webkit-transform:scale(1); 
     opacity:0 
    } 
} 

或者你可以创建一个与内部图像或背景图像的div，你有动画的几个想法，它有一个可下载的集免费，享受。