특징:
1. 사진이 미리 로드된 후 로드된 후 표시됩니다. 의도는 한 번 제시되며, 조각을 하나씩 다운로드해도 페이지가 파괴되지 않습니다. 이는 뛰어난 사용자 경험을 제공하고 브라우저에서 이미지를 렌더링하는 기존 방식을 전복합니다(후속 기능 지원 필요).
2. 이미지 로딩으로 인해 스크립트가 정지 및 정지되지 않으며 완전히 다른 스레드에서 처리됩니다. 주요 프로그램 흐름에는 영향을 미치지 않습니다.
3. 다음 두 가지 측면을 포함하여 적시에 피드백을 제공합니다. 1. 로드되는 사진 2. 현재 진행률. 사용자의 주의를 끌 확률이 크게 향상되고 사용자가 기다리기 때문에 떠나지 않게 됩니다.
4. 내결함성 지원, 사진이 성공적으로 다운로드되지 않은 경우에도 다음 사진을 처리하기 위한 시간 초과를 설정할 수 있습니다.
5. 가변 매개변수 유형으로 최대한 쉽게 사용할 수 있습니다.
// 'image_loader.js'로 저장하세요
//-*-*-*-*-*-*-*-*-*-*-*-*-*-*- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-//
/*
ImageLoader, 버전 1.1, JavaScript
(c) 2006 Christian An
저작권을 수정하지 않으시면 이 프로그램을 자유롭게 사용하실 수 있습니다.
*/
//-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-//
함수 ImageLoader(className,Options){
this._ImageLoadStack = null;
this._currrentLoading = "";
this._FinalRun = false;
this.numLoaded = 0;
this.ClassName = className;
if(typeof(Options)=="undefine") 옵션 = {};
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)=="정의되지 않음"){
this.AfterFunction = null;
}else{
this.AfterFunction = Options.func;
}
if(typeof(Options.display)=="정의되지 않음"){
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)=="정의되지 않음"){
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)=="undefine") document.imageArray = new Array();
this.Load = function(){
var args = this.Load.arguments;
if(args.length!=0){
this._ImageLoadStack = new Array(); [ 나]);
}
}
}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 = 이;
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 .시간 초과);
}
document.imageArray[j ].src = sURL;
if(this.procp!=null){
this.numLoaded ;
var percentage = Math.floor(this.numLoaded * 100 / this.numTotal);
this.procp.innerHTML = 백분율;
}
}else{
this._runFinal();
}
this._runfinal = function () {
if (this._finalRun == false) {
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
}
}
사용:
var loader = new ImageLoader(ClassName,Options );
그 중: loader: JavaScript 변수 이름입니다. ClassName: 문자열 유형: JavaScript의 로더 표현입니다. 객체가 함수 외부에서 생성된 경우 변수의 문자열 형식을 직접 할당하십시오. 예를 들어 해당 로더는 "loader"입니다. 함수 본문 내에 있으면 여전히 변수의 문자열 형식을 할당하되 생성하십시오. 변수 이름에는 window.loader 형식을 사용합니다.
옵션: 개체 유형, 다음 속성이 지원됩니다. 시간 초과: 정수, 선택 사항. 값은 1~100000(밀리초)입니다. 양수가 아닌 정수는 사용되지 않음을 나타냅니다. 사진의 최대 로딩 시간입니다. 이 매개변수가 제공되면 사진을 정상적으로 다운로드할 수 없는 경우 건너뛰고 다른 사진을 계속 다운로드할 수 있습니다. 그렇지 않으면 이미지가 다운로드될 때까지 기다립니다.
func: 함수/문자열, 필수입니다. 모든 이미지가 로드된 후 호출되는 함수로, 일반적으로 이러한 이미지의 기능을 표시하는 함수입니다. 이 기능이 제공되지 않으면 전체 메커니즘이 쓸모 없게 됩니다. 함수 유형의 매개변수는 직접 호출되며, 문자열 유형의 매개변수는 JavaScript 문으로 실행됩니다.
display : 문자열/객체, 선택 사항. 이는 현재 로드된 이미지를 표시하는 DOM 객체입니다. 이 객체는 innerHTML 속성을 지원해야 합니다. 이 매개변수가 String으로 제공되면 DOM 개체의 ID로 처리됩니다. Object 유형인 경우 직접 DOM 개체로 처리됩니다. 다른 유형을 제공하는 것은 효과가 없습니다.
프로세스: 문자열/객체, 선택사항. 이는 현재 로딩 진행률을 백분율로 표시하는 DOM 객체입니다. 이 객체는 innerHTML 속성을 지원해야 합니다. 이 매개변수가 String으로 제공되면 DOM 개체의 ID로 처리됩니다. Object 유형인 경우 직접 DOM 개체로 처리됩니다. 다른 유형을 제공하는 것은 효과가 없습니다.
다음 데모를 참조하세요.
//모든 함수 외부에 있는 경우
//function final(){...};
function $(par){
return document . getElementById(par)
var MyLoader = new ImageLoader("MyLoader ",{Timeout:1000,func: final,display:"display",process:$("process")}) ;
//함수 본문에 있는 경우
function somefunc(){
//...
window.MyLoader = new ImageLoader("MyLoader ",{Timeout :1000 ,func: "alert('fine')",display:"display",process:$("process")})
//...
}
메서드 정의:
Load(paralist): 일련의 이미지를 로드합니다. 완료 후 func 속성의 내용이 자동으로 호출됩니다. Paralist는 문자열 모음일 수 있지만(배열은 제공하지 않음) 각 항목은 , 로 구분됩니다. 이러한 문자열은 이미지의 URL이어야 합니다. 매개변수를 제공하지 않을 수도 있습니다. Load 메서드는 미리 설정된 일련의 이미지를 로드합니다. 미리 설정하지 않으면 func 속성의 내용이 직접 호출됩니다. func를 제공하지 않으면 아무런 효과가 없습니다.
//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");
//또는 사진 시리즈가 제공되는 경우.
MyLoader.Load();
setLoadImages(ArrayImages): 로드할 설정 그림 시리즈. ArrayImages는 배열 형태로 제공되어야 하며, 배열의 각 요소는 이미지의 URL이어야 합니다. 다른 유형의 매개변수는 허용되지 않습니다. 이 메서드가 호출된 후에는 이미지 로드가 시작되지 않습니다.
//샘플:
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"])
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
