loading gif代码

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了loading gif代码相关的知识,希望对你有一定的参考价值。

我下载了个LOADING GIF图片,怎样写代码之后变成真正的LOADING?

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来控制进度条的变化,一个是用限制进度条的播放来进行变化。

参考资料:http://wwwread114.cn

参考技术A gif图片无法实现此功能本回答被提问者采纳

loading加载和layer.js

layer.js中的loading加载

l本篇主要介绍layerjs中的loading加载在实际项目中的应用

1、使用的技术

前端:HTML5+CSS3+JS+layer.js 
后端:.net

2、遇到的问题

在使用layer.js插件中提供的loading时,需要在layer.js中的layer.css找到对应的gif格式动态图,此gif图需要和插件中的loading加载gif图大小尺寸相同 
技术分享图片

3、layer.js中load()方法介绍

load不需要传太多的参数,根据自己喜欢的风格来设置。方法中提供三种风格,供其选择。且Load中的icon支持传入0-2,如果是0,无需传入。但是load默认是不会关闭的,需要在回调函数中关闭。 
方法一: 
var index = layer.load(); //不传入参数,默认传0 
方法二: 
var index = layer.load(1); //参数1,另外一种风格 
方法三: 
var index = layer.load(2,{time:10*1000}); //参数2,换一种风格;time设置最长等待时间

4、实际项目中的运用

在对应的需要加载loading的html页面的js中加入写入loading加载的代码,以首页登录页面为例: 
1)设置登录界面的点击事件:

$(‘#submit‘).click(function() {
    $(this).css(‘background‘,‘green‘);//设置当前点击登录按钮后,改变其登录框的颜色
    confirm(); //调用ajax函数
})

2)loading加载:

$(function () {
    $.ajaxSetup({
    layerIndex:-1,
    beforeSend: function () { //插件加载前
        this.layerIndex = layer.load(0, { shade: [0.01, ‘#fff‘] });
        $(‘#submit‘).val("正在登录")
    },
    complete: function () { //完成加载后执行
        layer.close(this.layerIndex); //完成加载后关闭loading
    },
    error: function () { //报错时执行
            layer.alert(‘显示异常,请刷新后重试‘, {
            skin: ‘layui-layer-molv‘
            , closeBtn: 0
            , shift: 4 //动画类型
            });
        }
    });
});

5、效果图

技术分享图片

以上是关于loading gif代码的主要内容,如果未能解决你的问题,请参考以下文章

loading gif是啥意思

phpweb产品详情页图片不显示 一直是loading.gif的图片怎么回事

jQuery Mobile + Phonegap :: Ajax "Loading" gif 没有动画

loading加载和layer.js

前端常用的网址

在我的 php 文件解析和下载数据时调用 preloader(gif , loading image)