loading图标gif-jquery如何加一个loading图片？

loading

英 [ˈləʊdɪŋ]  美 [ˈloʊdɪŋ]

n. 装载;装货;装载的货

v. 装载,装填,担负(load的ing形式); 装入

oading and unloading 装卸工作

loading capacity 负荷容量;载荷能力

cyclic loading 循环荷载;周期荷载;交变载荷

loading system 装载系统;加感制;载带系统

loading test 载重试验;带负荷试验

扩展资料:

动词原形:load

英 [ləʊd]  美 [loʊd]

n. 负载,负荷;工作量;装载量

vi. [力] 加载;装载;装货

vt. 使担负;装填

[ 复数 loads 过去式 loaded 过去分词 loaded 现在分词 loading 第三人称单数 loads ]

打开软件,新建300*300的画布,分辨率为72,画布颜色选择为白色

2

在左侧矢量工具中,提供许多造型,选择“面圈形”

3

在画布中画一个200*200的造型,大小可在下方的属性面板里调整

4

鼠标点击造型,点击其中的黄点可以进行调节造型,如图所示

END

渐变效果

1

在下方的属性栏中选择添加渐变效果,这里使用“线性”渐变,左侧颜色填充为白色

2

可以进行适当的调整,可以适当的调整渐变中的透明度,如图所示

3

再绘制一个小圆,当做面圈头,如图所示,为的是转动起来有效果

END

动画效果

1

在菜单栏中选择“修改”-->“动画”-->"选择动画"

2

在“选择动画”中进行设置,点击“确定”,这里选择建立20个状态,这个动画效果就做好了

END

保存GIF

1

点击“文件”菜单中的“图像预览”

2

在格式里选择GIF动画,点击导出,loading动画就做好了

jquery中需要一张载入的图片,比如表示正在加载。

触发载入时,使用点击某个按钮。

html片段

<!--促发按钮-->

<input type="button" id="need-load" value="载入">

<!--遮罩背景层-->

<div id="load-layout" style="position:fixed;width:100%;height:100%;top:0px;left:0px;opacity:0.4;background:#000;display:none;">

<!--放置载入图片层,让载入图片放在大致中心就可以,需要绝对中心的话可以在js中做微调,这里忽略-->

<div style="position:absolute;left:49%;top:200px;width:图片宽度px;height:图片高度px;">

<img src="">

</div>

</div>

jq代码

$(function(){

$('#need-load').click(function(){

var _this = $(this);//存储触发元素,以备后面调用

$(this).attr('disabled',true);//禁用按钮

$('#load-layout').show();

//需要对图片位置进行调整可以放这里,这里忽略

$.ajax({

url : '目标地址'

。。。//ajax相关的参数,忽略

success:function(res){//成功后撤销载入

//这个可以加入的一些撤销判定,这里忽略

//载入后的一些操作,比如某一块显示结果html,这里忽略

$('load-layout').hide();//隐藏载入层

_('disabled',false);//撤销按钮禁用

},

error:function(){

//这里可以做一些错误的提示

$('load-layout').hide();//隐藏载入层

_('disabled',false);//撤销按钮禁用

}

});

});

});