预载Gif的2个JS代码(非常有用)

ghoust610

ghoust610

2016-02-19 19:06

下面图老师小编跟大家分享预载Gif的2个JS代码(非常有用),一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~

script language=javascript
        var Gif=[["images/smilies/","victory","sweat","loveliness","call","handshake","kiss","time","hug","lol","mad","funk"] , ["images/default/","reply","newtopic","newspecial","star_level2","star_level2","top","star_level3","star_level2"]];

        // 第一个是路径,后面的名称,比如 ["talk/",129,130,501,502,503] ,就是talk/ 目录下的129.gif,130.gif ...... 如果是字符串,就要加引号

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

        function LoadGif()
        {
                document.body.insertAdjacentHTML("beforeEnd",'div id="load" style="display=none"/div');
                Loading(0,1);
        }
        function Gif_Err()
        {
                alert("载入失败!")
        }
        function Gif_End()
        {
                alert("载入完成!")
                document.write('img src='+Gif[0][0]+Gif[0][1]+'.gif')
        }
        function Loading(a,b)
        {
                if (!Gif[a][b]) { a++; b=1; }
                if (a==Gif.length) {Gif_End(); return; }
                document.getElementById("load").innerHTML='img src="'+Gif[a][0]+Gif[a][b++]+'.gif" onload="Loading('+a+','+b+')" onerror="Gif_Err()"'
        }
/script
body onload=LoadGif()

上面的是单线程的
再发个一次性+loading的

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

script language=javascript
        var Gif=[["images/smilies/","victory","sweat","loveliness","call","handshake","kiss","time","hug","lol","mad","funk"] , ["images/default/","reply","newtopic","newspecial","star_level2","star_level2","top","star_level3","star_level2"]];

        var Loader=0,Gifs=0;

        function Gif_Err()
        {
                alert("载入失败!")
        }
        function Gif_End()
        {
                alert("载入完成!")
        }
        function LoadGif()
        {
                document.body.insertAdjacentHTML("beforeEnd",'div id="load"div id="loading"/divdiv id="loadGif" style="display:none"/div/div');
                for (var i=0; iGif.length; i++)
                {
                        Gifs+=Gif[i].length-1;
                        //Gif[i]='img src="'+Gif[i][0]+Gif[i].join('.gif" img src="'+Gif[i].shift())+'.gif" '
                        Gif[i]='img src="'+Gif[i][0]+Gif[i].join('.gif" onload="Loading()"  onerror="Gif_Err()"img src="'+Gif[i].shift())+'.gif" onload="Loading()" onerror="Gif_Err()"'
                }
                document.getElementById("loadGif").innerHTML=Gif.join("");
        }
        function Loading()
        {
                document.getElementById("loading").innerHTML=Math.round(++Loader/Gifs*100)+" %"
                if (Loader==Gifs)
                {
                        document.getElementById("load").innerHTML="";
                        Gif_End();
                }
        }
/script
body onload=LoadGif()

展开更多 50%)
分享

猜你喜欢

预载Gif的2个JS代码(非常有用)

Web开发
预载Gif的2个JS代码(非常有用)

180个非常有用的电脑知识

电脑入门
180个非常有用的电脑知识

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

ASP 编程中 15 个非常有用的例子

ASP
ASP 编程中 15 个非常有用的例子

ASP 编程中 20 个非常有用的例子

ASP
ASP 编程中 20 个非常有用的例子

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

分享16个非常有用的前端CSS框架

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
分享16个非常有用的前端CSS框架

ASP 编程中20个非常有用的例子

ASP
ASP 编程中20个非常有用的例子

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

系统巧妙设置让Windows 8开机更快

系统巧妙设置让Windows 8开机更快

VC中通过自动化客户端操作Word2000

VC中通过自动化客户端操作Word2000
下拉加载更多内容 ↓