비동기 이미지 로딩 jquery

Question

페이지를로드하는 동안 이미지를 비동기 적으로로드 할 수 있습니까? 사용자가 버튼을 클릭하면 코드의 이미지가 표시됩니다. 즉, 즉시 표시되지는 않습니다. 그런 다음 이미지를 일종의 캐시에로드 할 수 있는지, 그리고 필요할 때 오랫동안 기다리지 않고 표시 할 수 있는지 묻습니다.

Answer 1

모든 이미지 객체는 브라우저에 의해 비동기 적으로로드됩니다.

다음은 모든 이미지를 미리로드 한 다음 start() 메소드를 호출하는 이미지 로더입니다. start()가 호출되면 모든 이미지가 완전히로드되어 표시 준비가됩니다.

// image loader 

// put the paths to your images in imageURLs[] 
var imageURLs=[]; 
imageURLs.push("myImage1.png"); 
imageURLs.push("myImage2.png"); 

// the loaded images will be placed in imgs[] 
var imgs=[]; 

var imagesOK=0; 
loadAllImages(start); 

function loadAllImages(callback){ 
    for (var i=0; i<imageURLs.length; i++) { 
     var img = new Image(); 
     imgs.push(img); 
     img.onload = function(){ 
      imagesOK++; 
      if (imagesOK>=imageURLs.length) { 
       callback(); 
      } 
     }; 
     img.onerror=function(){alert("image load failed");} 
     img.crossOrigin="anonymous"; 
     img.src = imageURLs[i]; 
    }  
} 

function start(){ 

    // the imgs[] array now holds fully loaded images 
    // the imgs[] are in the same order as imageURLs[] 

}