javascript_javascript 스킬로 이미지를 순차적으로 로드하는 방법

본 글의 예시에서는 자바스크립트에서 이미지를 순차적으로 로딩하는 방법을 설명하고 있습니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

Javascript는 이미지 로드가 완료되면 다음 이미지를 로드합니다. 서버 부담을 줄이기 위해 서버에서 한꺼번에 로드하지 않습니다.
사용 가능한 장소: 예를 들어 Google 지도와 유사한 애플리케이션을 만들 때 작은 사진을 하나씩 로드할 수 있습니다

function Load_pic(arr){
 this.loop_f=function(i,o_file,len,f,obj){
   if(i<len-1){
     i=i+1;
     f(i,o_file,len,obj);
     }
  };
  this.creat_pic=function(i,o_file,len,obj){
    var f=arguments.callee,
    doc=document,
    image = doc.createElement("img");  
    image.src =o_file[i];
    i<len&#63;doc.getElementsByTagName("body")[0].appendChild(image):'';
    if(navigator.userAgent.indexOf("MSIE")>0){ 
        if($.browser.version==6.0 || $.browser.version==9.0){
        //IE9和IE6一样 微软真是怪异
          image.onreadystatechange = function () { 
            if (image.readyState == "complete"){ 
              obj.loop_f(i,o_file,len,f,obj);
            } 
          }; 
        }else{ 
          ie7imagetime = window.setInterval(function(){ 
            var rs = image.readyState; 
            if(rs=="complete"){ 
              window.clearInterval(ie7imagetime); 
              obj.loop_f(i,o_file,len,f,obj);
            }else{ 
              return; 
            } 
          },200); 
        } 
      }else{ 
        image.onload = function () { 
          if (image.complete == true){ 
          obj.loop_f(i,o_file,len,f,obj);
          } 
        }; 
    }
  }; 
   if(arr.constructor===Array){
   var len=arr.length,
      i=0;
   i<len&#63;this.creat_pic(i,arr,len,this):'';
  };
 }
//调用方法
new Load_pic([
'http://gomap.dashilan.cn/jquery-mobile/map/cq/1/img_1/0_0.gif',
'http://gomap.dashilan.cn/jquery-mobile/map/cq/1/img_1/0_1.gif',
'http://gomap.dashilan.cn/jquery-mobile/map/cq/1/img_1/0_2.gif',
'http://gomap.dashilan.cn/jquery-mobile/map/cq/1/img_1/0_3.gif',
'http://gomap.dashilan.cn/jquery-mobile/map/cq/1/img_1/1_0.gif',
'http://gomap.dashilan.cn/jquery-mobile/map/cq/1/img_1/1_1.gif',
'http://gomap.dashilan.cn/jquery-mobile/map/cq/1/img_1/1_2.gif',
'http://gomap.dashilan.cn/jquery-mobile/map/cq/1/img_1/1_3.gif'
]);
//注意要调用jquery 用于判断浏览器

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.