Image preloading_javascript skills

Features:
1. Pictures are preloaded and then displayed after loading. The intention is presented once, and your page will not be destroyed by downloading pieces one by one. It provides an excellent user experience and subverts the traditional way of rendering images in browsers (requires subsequent function support).
2. The script will not be suspended and suspended due to loading images, and will be completely processed in another thread. Does not affect the main program flow.
3. Provide timely feedback, including two aspects: 1. What pictures are being loaded 2. The current percentage progress. Greatly improve the probability of retaining the user's attention, and will not let the user leave because of waiting.
4. Fault tolerance support, even if a picture is not successfully downloaded, you can set a timeout to process the next picture.
5. Variable parameter types, making it as easy to use as possible.

// save this as "image_loader.js"

//-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-//
/*
  ImageLoader, Version 1.1, JavaScript 
  (c) 2006 Christian An 

  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.disp = null;
    }else if(typeof(Options.display)=="string"){
        this.disp = document.getElementById(Options.display);
    }else if(typeof(Options.display)=="object"){
        this.disp = Options.display;
    }else{
        this.disp = null;
    }

    if(typeof(Options.process)=="undefined"){
        this.procp = null;
    }else if(typeof(Options.process)=="string"){
        this.procp = document.getElementById(Options.process);
    }else if(typeof(Options.process)=="object"){
        this.procp = Options.process;
    }else{
        this.procp = 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                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.disp!=null) this.disp.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.procp!=null){
                this.numLoaded ;
                var percentage = Math.floor(this.numLoaded * 100 / this.numTotal);
                this.procp.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._ImageLoadStack = imageArray ;
}

}




Use:

var loader = new ImageLoader(ClassName,Options ); Create this object in the form of

.

Among them: loader: is the JavaScript variable name; ClassName: String type: is the expression of loader in JavaScript. If the object is created outside any function, please directly assign the string form of the variable, for example, the corresponding loader is "loader"; if it is within a function body, still assign the string form of the variable, but create Please use the form of window.loader for variable names.

Options: Object type, the following properties are supported:

Timeout: Integer, optional. The value is 1-100000, in milliseconds. Non-positive integers indicate not to be used. This is the maximum loading time of a picture. If this parameter is provided, if a picture cannot be downloaded normally, you can skip and continue to download another picture. Otherwise it will wait until the image is downloaded.
func: Function / String, required. A function called after all images have been loaded, usually a function that displays the functionality of these images. If this function is not provided, the entire mechanism becomes useless. Function type parameters will be called directly, and String type parameters will be run as JavaScript statements.
     display : String/Object, optional. This is the DOM object that displays the currently loaded image. This object should support the innerHTML attribute. When this parameter is provided as String, it will be treated as the id of the DOM object. If it is of type Object, it will be directly treated as a DOM object. Providing other types has no effect.
Process: String / Object, optional. This is a DOM object that displays the current loading progress in percentage. This object should support the innerHTML attribute. When this parameter is provided as String, it will be treated as the id of the DOM object. If it is of type Object, it will be directly treated as a DOM object. Providing other types has no effect.
See the following demonstration:

//When outside all functions
//function final(){...};
function $(par){
return document .getElementById(par)

}

var MyLoader = new ImageLoader("MyLoader ",{Timeout:1000,func: final,display:"display",process:$("process")}) ;


//When in a function body
function somefunc(){
//...
window.MyLoader = new ImageLoader("MyLoader ",{Timeout :1000,func: "alert('fine')",display:"display",process:$("process")});
//...
}



Method definition:

Load(paralist): Load a series of images. After completion, the content of the func attribute is automatically called. Paralist can be a collection of strings (but do not provide an array), each item separated by , . These strings should be the URLs of the images. You can also provide no parameters. The Load method will load a preset series of images. If it is not set in advance, the content of the func attribute will be called directly. If func is not provided, it has no effect.

//sample：
MyLoader.Load("http://bbs.blueidea.com/images/blue/logo.gif",
" "http://gg.blueidea.com/2006/ chinaok/208x32.gif",
"http://gg.blueidea.com/2006/now/208x32.gif",
"http://gg.blueidea.com/2006/gongyi/banner. jpg",
"http://gg.blueidea.com/2006/flash8/pepsi.gif",
"http://www.google.com/intl/zh-CN_ALL/images/logo. gif");

//or if pic series is provided.

MyLoader.Load();

setLoadImages(ArrayImages): Settings to be loaded picture series. ArrayImages should be provided in the form of an array, and each element of the array should be the URL of an image. No other types of parameters are accepted. After this method is called, the image does not start loading.

//sample:
MyLoader.setLoadImages(["http://bbs.blueidea.com/images/blue/logo.gif",
“http://gg.blueidea. com/2006/chinaok/208x32.gif",
"http://gg.blueidea.com/2006/now/208x32.gif",
"http://gg.blueidea.com/2006/ gongyi/banner.jpg",
"http://gg.blueidea.com/2006/flash8/pepsi.gif",
"http://www.google.com/intl/zh-CN_ALL/ images/logo.gif"])