图片预载入第1/3页

136 阅读 0 评论 90 点赞

我是靠谱客的博主沉静小蜜蜂，最近开发中收集的这篇文章主要介绍图片预载入第1/3页，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

特点：
1.图片预载入，载入后再显示。意图一次呈现，不会让一块一块下载破坏你的页面，绝佳的用户体验，颠覆传统的浏览器呈现图片的处理方式（需要后续函数支持）。
2.不会因载入图片造成脚本暂停假死，完全另一线程进行。不影响主程序流程。
3.提供及时的反馈，包括两方面的内容：1.正在载入什么图片 2.当前的百分数进度。大大提高留住用户眼球的概率，不会让用户因为苦等而离开。
4.容错支持，即使某个图片没有成功下载，也可以设置超时时间以便处理下一个图片。
5.多变的参数类型，尽最大可能方便使用。

复制代码代码如下:

// save this as "image_loader.js" 

//-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-// 
/* 
  ImageLoader, Version 1.1, JavaScript  
  (c) 2006 Christian An <anchangsi@gmail.com> 

  With copyright not modified, you can use this program freely.  
*/ 
//-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-// 

function ImageLoader(className,Options){ 
    this._ImageLoadStack = null; 
    this._currrentLoading = ""; 
    this._FinalRun = false; 
    this.numLoaded = 0; 
    this.ClassName = className; 

    if(typeof(Options)=="undefined") Options = {}; 

    if(isNaN(Options.Timeout) || Options.Timeout < 0 ||  Options.Timeout >100000){ 
        this.EnableTimeout = false; 
    }else { 
        this.EnableTimeout = true; 
        this.Timeout = Options.Timeout; 
    } 

    if(typeof(Options.func)=="undefined"){ 
        this.AfterFunction = null; 
    }else{ 
        this.AfterFunction = Options.func; 
    } 

    if(typeof(Options.display)=="undefined"){ 
        this.disDiv = null; 
    }else if(typeof(Options.display)=="string"){ 
        this.disDiv = document.getElementById(Options.display); 
    }else if(typeof(Options.display)=="object"){ 
        this.disDiv = Options.display; 
    }else{ 
        this.disDiv = null; 
    } 

    if(typeof(Options.process)=="undefined"){ 
        this.procDiv = null; 
    }else if(typeof(Options.process)=="string"){ 
        this.procDiv = document.getElementById(Options.process); 
    }else if(typeof(Options.process)=="object"){ 
        this.procDiv = Options.process; 
    }else{ 
        this.procDiv = null; 
    } 

     
    if(typeof(document.imageArray)=="undefined") document.imageArray = new Array(); 

    this.Load = function(){ 
        var args = this.Load.arguments; 
        if(args.length!=0){ 
            this._ImageLoadStack = new Array(); 
            for(i=0; i<args.length; i++){ 
                if(args[i].indexOf("#")!=0){ 
                    this._ImageLoadStack.push(args[i]); 
                } 
            } 

        }else if(this._ImageLoadStack == null){ 
            this._runFinal(); 
        } 
        this.numTotal = this._ImageLoadStack.length; 
        this._LoadAImage(); 
    } 

    this._LoadAImage = function(){ 
        if(this._ImageLoadStack.length!=0){ 
            var sURL = this._ImageLoadStack.shift(); 
            if(this.disDiv!=null) this.disDiv.innerHTML = sURL; 
            _currrentLoading = sURL; 

             
            var j = document.imageArray.length; 
            document.imageArray[j] = document.createElement("IMG"); 
            document.imageArray[j].Owner = this; 

            document.imageArray[j].onload = function(){ 
                this.Owner._LoadAImage(); 
                this.onload = null; 
            } 
            document.imageArray[j].onerror = function(){ 
                this.Owner._LoadAImage(); 
                this.onload = null; 
            } 

            if(this.EnableTimeout){ 
                window.setTimeout("if(_currrentLoading==""+sURL+""){"+this.ClassName+"._LoadAImage()}",this.Timeout); 
            } 

            document.imageArray[j++].src = sURL; 
                if(this.procDiv!=null){ 
                this.numLoaded++; 
                var percentage = Math.floor(this.numLoaded * 100 / this.numTotal); 
                this.procDiv.innerHTML = percentage; 
            } 

        }else{ 
            this._runFinal(); 
        } 

    } 
    this._runFinal = function(){ 
            if(this._FinalRun == false){ 
                this._FinalRun = true; 

                if(typeof(this.AfterFunction)=="function"){ 
                    this.AfterFunction(); 
                }else if(typeof(this.AfterFunction)=="string"){ 
                    if (window.execScript){ 
                        window.execScript(this.AfterFunction); 
                    }else{ 
                        window.eval(this.AfterFunction);  
                    } 
                } 
            } 
    } 
    this.setLoadImages = function(imageArray){ 
        if(typeof(imageArray)!="object") return; 
        this._ImageLoadStack = imageArray; 
    } 

} 