loading图代码（loading图案）

今天给各位分享loading图代码的知识，其中也会对loading图案进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、如何在Hype中自定义loading图
• 2、loading gif代码
• 3、用JQuery实现页面Loading的效果，全部加载完成之后进度条消失，怎么办？
• 4、jquery如何加一个loading图片？

如何在Hype中自定义loading图

在Hype中自定义loading图：

1.我们来验证一下。打开Hype，这里我提前导入了一张较大的图片。这文稿检查器的选项栏目下，我们可以看到有这么一栏“显示正在加载指示器”，这就是我们之前说的可以开启hype内置的loading图选项。在chrome中预览时我们发现，页面留空了将近半秒钟才显示了加载的内容页面。

2.当我们勾选了“显示正在加载指示器”后，再来预览一下。我们发现在页面中多了一个显示loading的图。这就是hype内置的加载loading指示器。很多用户看到后会觉得他不美观。重点来了，那么我们怎么自定义这张图呢？我们能替换成我们需要加载的loading效果吗？其实很简单，说白了就是替换自带的loading指示器图。

3.首先，为了确保我们使用的loading图能够显示：

一.在文稿检查器中不勾选"显示正在加载指示器"

二.不勾选绘制场景背景

三.导出为HTML5文件的时候，确保你已经勾选了“创建上层文件夹”选项（示意图如下所示）

4.我们将文件命名为test，保存至桌面。

5.打开test文件，通过编辑器打开test.html文件，在编辑器中找到上图选中的这一段代码。到时候我们的图片的代码就是插在这中间的。

6.将如下这段代码复制到上面

!-- inserted loader code: --

div style="position:absolute;height:400px;top:0;left:0px;" img src="image.jpg" h3 style="color:gray;"Loading.../h3 /div

!-- end inserted loader code --

7.我从网上下载了一张GIF loading图（xh.gif），我们就用他来替换hype自带的loading指示器。首先我们需要复制这张gif图的名称（记得将.gif格式一起复制哦）。打开我们之前的编辑器，将image.jpg 用我们准备的gif图名称代替。打开test文件夹，双击test.html，在浏览器中预览一下，我们发现加载时，有一张裂图出现在了网页中，loading字样则显示在其下方，说明代码还是起作用了。出现的裂图是因为我们没有将gif资源文件放在test文件夹下。

8.我们将资源文件拖入到test文件夹中，我们再来访问一下test.html。这是我们惊喜的发现，loading图已经显示在了网页中。但是对于显示的位置我们不是很满意。那么我们就需要修改之前代表位置的那段代码了。

9.也就是这一段：div 。这里我们用百分比来设置loading图在屏幕中显示的位置，设置position:absolute;（绝对定位）无论加载的文件内容位置怎么变，都不会影响loading图的位置。top和left设置的百分比表示距离顶部和左边的距离。设置百分比的好处是：不论你屏幕的尺寸有多不一样，他相对屏幕的位置是不会变的。当然这个距离你可以自行调整，你可以使你的loading图在屏幕的任何位置。为了让页面简洁这里我将loading的字样删除了，当然如果你需要的话你可以保留，还可以在style中更改成你想要的样式。好的，替换完之后，我们通过chrome中的设备模式来预览一下效果吧。这时我们惊奇的发现，loading图已经显示在了屏幕的中间（有偏差可以自行调整）。

10.上传到服务器后，通过访问链接生成的二维码，我们用微信扫一扫在微信浏览器中预览一下效果。这里我们可以看到，加载的效果还是很明显的。刷新一下界面，我们可以发现加载效果还是存在的。这样我们就可以将原先的loading图替换成无论是网上找的还是自己做的，都没问题。小伙伴们是不是已经按耐不住了呢？想自己动手试一下了吧。已附上本次教程的资源文件。

loading gif代码

LOADING是装载动画!不是加GIF的图片要是真的要用这的话建议把DIF导入到FLASH里重新制作一下

代码关系到几个变量

一. Loading的作用。

Loading.英文原意为装载，装填。在flash里面叫做预载画面。我们在欣赏每一件完整的flash作品的时候，都会看到loading的出现。这是因为，动画播放是否流畅取决于网络带宽，对于用调制解调器的朋友们欣赏的时候，loading会预先的加载一部分或全部以后，才能流畅播放。特别是，动画中有音乐或者位图的情况下，loading 的作用就显而易见了。由于上述的条件限制，没有哪一个动画不作loading。Loading发展到现在已经不是简单的一个下载动画的工具了。它已经成为体现主体动画，衬托主体的一个载体。Loading分为两个大部分。一个是功能类的（指下载作用功能）另一部分是等待动画。下面我们就从这两个方面来研究一下。

二 Loading的制作

制作loading 有许多的方法。我们从最简单的开始向大家介绍：

第一种：loading( 假的 )

也就是假loading。这种loading我想在某些人的动画中也会出现。我就曾经作了一个。我先作的动画，最后作loading,时值夜半，睡意朦胧，恍惚中作了一个。欣喜之余，马上发布。天明清醒，遂发现loading没加as。故称为（假）loading 。幸好，动画不长，没人发现。心中窃喜。在这里告诫朋友们，loading 也是我们的作品的一部分，我们要用正确的态度来对待它。

第二种：用ifFrameLoaded语句来完成。

IfFrameLoaded现在已经被MX给否决了。MX不提倡用此语句。但是还是可用的。完整的语句为：

If|FrameLoaded(欲加载的场景 . 欲加载的帧数或帧标签){

GotoAndPlay(正式动画的第一帧)

此语句的缺点是，它只能判断欲载程序是否到某一帧。可是如果此帧的后面有许多音乐或位图，播放以后还是不流畅的。

好了，我们一起来作一个简单的Loading吧！

1、 打开flash mx，新建一个文件。

2、 新建一个影片剪辑mc(^+F8)，命名为myloading。

3、 进入影片剪辑myloading编辑区，利用长方形工具画一个进度条

4、 然后，在100帧处插入关键帧。

5、 返回到影片剪辑myloading的第一帧，利用变形工具，改变进度条的中心点到左侧，并使之变形。（在x轴上缩小至消失）

6、选第一祯,在下面的属性里,补间里选形状 创建形状渐变。

7、 在影片剪辑myloading的编辑区里新建一层，来作进度条的外框。用画矩形工具,画个比进度条大的方框,无填充色

8、 回到主场景，打开库面板F11，把影片剪辑myloading拖放到第一层的第一帧，并延长第二帧

9、 点击舞台中的影片剪辑，在属性面板中填如其身份名myloading。

10、 在主场景中新建一层，命名为as。在as层的第二帧插入空白关键帧。

11、 分别在as层的第一帧和第二帧加入as语句如下：

第一帧：

a=getBytesLoaded();

b=getBytesTotal();

loaded=int(a/b*100);

myloading . gotoAndPlay( loaded );

第二帧：

if(a==b){

nextScene();

}else{

gotoAndPlay(1);

}

12、 打开场景面板，把现存的场景一改名为：loading。

然后在增加一个场景,名为next,注意两个场景的上下,在上面的是动画发布后播放的第一个场景,哪个场景在下面,哪个是后放的

13、 新建的场景next，并在新场景的第一帧加入一幅图片或一段动画。越大越好......不要超过4M.......

14、 测试完成,一般情况下,在本机了看不出效果的,做好后,最好是上传到闪吧后,就能看到载入的动画及效果了

动作脚本解释：

第一帧：

a=getBytesLoaded(); //设置变量a等于下载的字节数。

b=getBytesTotal(); //设置变量b等于动画全部字节数。

loaded=int(a/b*100); //int为取(a/b*100)的整数（近似值）

myloading . gotoAndPlay( loaded ); //播放影片剪辑，并以loaded的进度限制。

第二帧：

if(a==b){ //如果下载的字节数等于全部字节数，则执行下面的语句。

nextScene(); //播放下一个场景。

}else{ //否则，（条件不满足时）

gotoAndPlay(1); //播放第一帧

}

这段语句与上面的语句其实意义都是一样的，都是利用下载的大小除以全部大小来获取百分比。不同的是获取对象一个是帧数，一个是字节数。另外，一个是用as来控制进度条的变化，一个是用限制进度条的播放来进行变化。

用JQuery实现页面Loading的效果，全部加载完成之后进度条消失，怎么办？

常规的解决办法还是用ajax比较好。大概是这样的。

需要两个页面。

1.一个是实际页面本身  

2.另一个是一个空白页面放一张loading图片

先请求第2个页面，在这个页面中放一段ajax请求第1个页面，在success函数里将页面内容输出，并将loading图片隐藏掉。

代码是这样的：loading page:body    img id='loadingImg' src='loading.gif' /bodyscript  $.ajax({ type: 'GET', url: 实际页面路径, data: {}   success: function() $('body').append(data)   $('#loadingImg').hide();//或直接remove()    },  dataType: 'html'    });/script

电脑黑屏解决方法：

1、检查显示器与电脑的连接线是否安装紧密；

2、取下电脑内存条，用橡皮擦拭金手指后放回（接触不良会造成电脑开机黑屏）；

3、更换内存、显卡、显示器、连接线诊断故障所在。

4、系统文件损坏，重装系统。

这是一种解决方法~

1、制作启动盘。（W7系统4G U盘，XP系统2G U盘）下载大番薯u盘启动制作工具，安装软件，启动，按提示制作好启动盘

2、下载一个你要安装的系统，压缩型系统文件解压（ISO型系统文件直接转到U盘）到你制作好的U盘，启动盘就做好了

3、用U盘安装系统。插入U盘开机，按DEL或其它键进入BIOS，设置从USB启动-F10-Y-回车。按提示安装系统

4、安装完成后，拔出U盘，电脑自动重启，点击：从本地硬盘启动电脑，继续安装

5、安装完成后，重启。开机-进入BIOS-设置电脑从硬盘启动-F10-Y-回车。

jquery如何加一个loading图片？

jquery中需要一张载入的图片，比如loading.gif表示正在加载。

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

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="load.gif"

/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();//隐藏载入层

_this.attr('disabled',false);//撤销按钮禁用

},

error:function(){

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

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

_this.attr('disabled',false);//撤销按钮禁用

}

});

});

});

关于loading图代码和loading图案的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。