希望采纳
1、直接贴图：在界面上贴一个gif动态等待效果图片
gif图片获取方式：网上找素材，会ps的可以自己制作
<img src="wait.gif" />
2、CSS3/SVG/HTML5 Canvas手动绘制等待效果：
这种效果：网上有很多类似素材，可以根据需要选择，或使用上述技术绘制
下面提供一个CSS3绘制的范例
<style>
.loading {
width:0
height:0
border-right:20px solid #fff
border-top:20px solid #000
border-left:20px solid #fff
border-bottom:20px solid #000
border-radius: 20px
-moz-border-radius: 20px
-webkit-border-radius: 20px
}
.loading {
animation: bganim 0.6s linear 0s infinite
-moz-animation: bganim 0.6s linear 0s infinite
-webkit-animation: bganim 0.6s linear 0s infinite
}
@keyframes bganim {
from { transform:rotate(0deg)} to { transform:rotate(360deg)}
}
@-moz-keyframes bganim {
from { -moz-transform:rotate(0deg)} to { -moz-transform:rotate(360deg)}
}
@-webkit-keyframes bganim {
from { -webkit-transform:rotate(0deg)} to { -webkit-transform:rotate(360deg)}
}
</style>
<label>CSS3效果</label>
<div class="loading"></div>
-------------------------------------------------
效果如下图：
运行机制很简单，先手动绘制一个静态的图，然后控制对应div进行360度旋转，即可实现
3、使用js等待效果插件(如：spin.js)
JS
-----------------------------------------------------
var opts = {
lines: 9,
length: 0,
width: 15,
radius: 20,
corners: 1,
rotate: 0,
direction: 1,
color: '#0101DF',
speed: 1,
trail: 34,
shadow: false,
hwaccel: false,
className: 'spinner',
zIndex: 2e9,
top: '50%',
left: '50%'
}
var target = document.getElementById('img_wait')
var spinner = new Spinner(opts).spin(target)
7
html
---------------------------------
<div id="img_wait"></div>
可以：减少http连接请求因为你网页中每引入一个图片、css文件、js文件或引入的其他什么东西都会产生一个http连接
坏处是图片、css代码的管理、修改难度增加
而切这种方法用到 a:hover 方式来切换按钮背景图之类的，在ie(没实测，应该是大多数版本ie)下依然会产生多个http连接请求，得不偿失。
这个技术你了解就行了，如果你网站浏览量没大到每分钟几千上万，你的服务器是包月\年的，不是门户那样一年花几百上千万包的带宽的话，你大可不必用这个办法，少几个http请求多几个http请求对小站来说，访问速度没有明显影响，没必要为快那0.0x秒去把可维护性降低，每天多那么一两M的数据量你又不必另外付钱。
