又一个小巧的图片预加载类

1984521hu

1984521hu

2016-02-19 09:59

下面是个超简单的又一个小巧的图片预加载类教程,图老师小编精心挑选推荐,大家行行好,多给几个赞吧,小编吐血跪求~
代码如下:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
HTML
HEAD
TITLE New Document /TITLE
meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /
SCRIPT LANGUAGE="JavaScript"
!--
var IE=navigator.appName=="Microsoft Internet Explorer";
var Opera=navigator.appName.toLowerCase()=="opera";
var FF=!IE && !Opera;
function LoadImage(arrSrc,callBack)
{
    this.Length=arrSrc.length;
    this.LoadedLen=0;    //已经被加载的图片个数
    var self=this;
    if(self.Length1)
    {
        callBack(arrSrc);
        return;
    }

    //经测试,OPERA与别的浏览器加载方式不同,所以特别独立开来...
    if(Opera)
    {
        for(var i=0;iself.Length;i++)
        {
            var tmpImg=new Image();
            tmpImg.src=arrSrc[i];
            tmpImg.onload=function()
            {
                self.LoadedLen++;
                if(self.LoadedLen==self.Length && callBack)    callBack(arrSrc);
            }
        }
        return;
    }

    this.Load=function()
    {
        self.LoadedLen++;
        document.getElementById("counter").innerHTML=self.LoadedLen;
        if(self.LoadedLenself.Length)    self.DownImg();
        else if(callBack)    callBack(arrSrc);
    }

    this.DownImg=function()
    {
        var tmpImg=new Image();
        tmpImg.src=arrSrc[self.LoadedLen];
        if(IE)
        {
            if(tmpImg.readyState=="complete")    self.Load();
            else    tmpImg.onreadystatechange=function()
            {
                if(this.readyState=="complete")    self.Load();
            }
        }
        else    tmpImg.onload=self.Load;
    }
    this.DownImg();
}
//--
/SCRIPT
/HEAD
BODY
div id="counter"/div
 SCRIPT LANGUAGE="JavaScript"
 !--
    var arr=['http://photo.hjbbs.com/photo/20060531/20060531103027226_756_o.jpg','http://img1.soufun.com/bbs/2007_02/13/1171345302199.jpeg','http://img.c8c8.cn/2006/09/09/15032/pp20060909002749.jpg'];
    var t=new LoadImage(arr,function(arr)
    {

        var str="";
        for(var i=0;iarr.length;i++)
        {
            str+="img src='"+arr[i]+"' /br";
        }
        document.body.innerHTML+=str;
    });
 //--
 /SCRIPT
/BODY
/HTML
展开更多 50%)
分享

猜你喜欢

又一个小巧的图片预加载类

Web开发
又一个小巧的图片预加载类

又一个玲珑

PS PS教程
又一个玲珑

s8lol主宰符文怎么配

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

又一个案子解决了攻略

电脑网络
又一个案子解决了攻略

又一个不错的js浮动广告代码

Web开发
又一个不错的js浮动广告代码

lol偷钱流符文搭配推荐

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

javascript实现的又一个不错的滑动导航效果

Web开发
javascript实现的又一个不错的滑动导航效果

用CSS实现图片的预加载

Web开发
用CSS实现图片的预加载

lolAD刺客新符文搭配推荐

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

js奇偶数判断的代码

js奇偶数判断的代码

解32位Windows 7能够用上4G内存的谎言

解32位Windows 7能够用上4G内存的谎言
下拉加载更多内容 ↓