자바 스크립트 미리로드 이미지 창이로드 된 후

Question

사용자가 선택한 항목에 따라 라이트 박스에 배치 된 캔바스에 이미지를로드해야하는 프로젝트 작업 중입니다.

사용자가 이미지 URL이 수신 XHR 요청 ..

I 로딩 이미지에 문제를 갖고, 다음의 코드의 실행을 연기하고있다에이어서, 버튼을 클릭하기 전에 이미지 중에로드되지 ... ...

내 이미지 로딩 기능은 .. 같은

function preloadImage(url){ 
    var img = new Image(); 
     if (!img.complete) { 
      console.log('not complete'); 
      //return false; 
     } 
     if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) { 
      console.log('no width'); 
      //return false; 
     } 
    img.onerror='Image failed to load...'; 
    img.src = url; 
} 

을보고 내 캔버스 요소 ...이를 설정하기 전에 코드에서 내가 전화

preloadImage(url); 
setstage(url); 

가끔 캔버스가 내 무대를 설정하는 시간에 이미지를 가져 오지만 때로는 빈 무대가 있습니다. /. 이 작업을 수행하고 이미지 사전로드 문제를 어떻게 든 해결할 수있는 방법이 있습니까? preloadImage에 콜백을 사용하여

Answer 1

나는 상당히 견고하고 안정적인 솔루션을 제안해야한다는 압력을 받았으며 온라인 기사 및 다른 개발자의 경험을 통해 꽤 많은 독서를했습니다. 콜백이 미리로드 된 견고한 제품입니다. ...

기능은 ... 단순히이

function preloadimages(arr){ 
    var newimages=[], loadedimages=0 
    var postaction=function(){} 
    var arr=(typeof arr!="object")? [arr] : arr 
    function imageloadpost(){ 
     loadedimages++ 
     if (loadedimages==arr.length){ 
      postaction(newimages) //call postaction and pass in newimages array as parameter 
     } 
    } 
    for (var i=0; i<arr.length; i++){ 
     newimages[i]=new Image() 
     newimages[i].src=arr[i] 
     newimages[i].onload=function(){ 
      imageloadpost() 
     } 
     newimages[i].onerror=function(){ 
      imageloadpost() 
     } 
    } 
    return { //return blank object with done() method 
     done:function(f){ 
      postaction=f || postaction //remember user defined callback functions to be called when images load 
     } 
    } 
} 

입니다 그리고 누군가 개선이있는 경우 간단한 사용 사례

preloadimages(IMAGES-ARRAY).done(function(images){ 
     // code that executes after all images are preloaded 
    }); 

입니다 당신은 확장과 의견을 환영합니다, 아마도 누군가는 이로부터 혜택을받을 것입니다.

Answer 2

시도 :

function preloadImage(url, callback) { 

    var img = new Image(); 

    img.onerror = function() { 

     callback('error', url, img); 
    }; 

    img.onload = function() { 

     callback(null, url, img); 
    }; 

    img.src = url; 
} 

preloadImage(url, function(err, url, img) { 

    if (err) { 
     console.log('something wrong!!', url); 
     return; 
    } 

    //get more params from img.. 
    setstage(url); 
}); 

..

function foo() { 

    //here are some params 
    var srcx = 1, id = 2, x = 3, y = 4; 

    preloadImage(url, function(err, url, img) { 

     if (err) { 
      console.log('something wrong!!', url); 
      return; 
     } 

     //more params 
     var width = 5, height = 6; 

     setstage(srcx, id, x, y, width, height); 
    }); 
} 

Answer 3

그것을 할 여러 가지 방법이 있습니다. 가장 간단한 방법은 img.onload 이벤트가 발생할 때까지 setStage으로 전화를 기다리는 것입니다. 어떤 이유로 든 preloadImage(url)과 동일한 범위에서해야하는 경우 어떤 이유인지 확실하지 않으면 image.onload 콜백으로 반환 된 약속을 통해 다음 단계를 수행 할 수 있습니다.