Picture pre-loading page 1/3

Features:
1. Pre-load the image and display it after loading. An intent is displayed at a time, which won't cause a piece of download to damage your page. This provides an excellent user experience and subverts the processing method of rendering images in traditional browsers (which requires the support of subsequent functions ).
2. The script will not be suspended due to image loading, and will be executed in another thread completely. The main program process is not affected.
3. provide timely feedback, including two aspects: 1. What image is being loaded 2. The progress of the current percentage. This greatly increases the probability of retaining the user's eye and does not cause the user to leave due to suffering.
4. Fault Tolerance support. Even if an image is not successfully downloaded, you can set a time-out period to process the next image.
5. Variable Parameter types for easy use as much as possible.
Copy codeThe Code is as follows:
// 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. _ curr+loading = "";
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 (_ currjavasloading = \" "+ 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.exe cScript ){
Window.exe cScript (this. AfterFunction );
} Else {
Window. eval (this. AfterFunction );
}
}
}
}
This. setLoadImages = function (imageArray ){
If (typeof (imageArray )! = "Object") return;
This. _ ImageLoadStack = imageArray;
}

}