提问人：Gene R 提问时间：10/10/2008 最后编辑：Jason BuntingGene R 更新时间：9/28/2014 访问量：14319
你有没有用于jQuery的Ajax加载图像的想法？
Do you have any Ajax loading image ideas for use with jQuery?
问：
我有一个页面正在加载jQuery。初始加载包括 100 条记录，每条记录有 6 个图标。毋庸置疑，加载需要几秒钟，我想给用户一个“加载”提示/动画。
有什么想法吗？
答：
0赞
DMKing
10/10/2008
#1
您可以将带有动画 GIF 图像的 div 显示为加载提示。这就是我过去的做法。
0赞
Toji
10/10/2008
#2
每当我需要这样的东西时，我都会用一个简单的、居中的、动画的 gif 替换将要加载的元素，上面写着“正在加载，请稍候”或类似的消息。如果进度指示器只有几秒钟，那么它可能有点矫枉过正，但一个简单的动画可以让大多数人放心，是的，您的网站仍在运行。
11赞
Dylan Beattie
10/10/2008
#3
http://www.ajaxload.info/ 是为此类事情生成动画 GIF 的绝佳资源。
获得动画后，将其渲染为页面的一部分;在动画的 onload（） 事件上触发 jQuery 加载机制（这样您就可以确定动画已首先加载），并在加载序列末尾使用回调来禁用/隐藏动画 GIF。
评论
1赞
Gene R
10/10/2008
这就是一个，非常感谢，ajaxload.info 是一个额外的奖励。再次感谢
4赞
Jason Bunting
10/10/2008
#4
Matt Berseth 有一种很好的基于 jQuery 的方法。
0赞
Sugendran
10/10/2008
#5
您可能需要设置一个全局 ajax 事件来显示/隐藏加载图标。看一看： http://docs.jquery.com/Ajax_Events
1赞
unknownclubber
12/22/2009
#6
加载图像的另一个资源：http://www.loadinfo.net/
0赞
Buturca Marius
9/28/2014
#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，你这里有一些动画的想法，它有一个可下载的免费集，享受。
评论