자바 스크립트 - 이미지를로드하기 전에 img onload가 실행됩니다.

Question

이미지가로드되기 전에 내 img.onload가 실행 중입니다. 캔버스에 이미지를 그리려고합니다. 나는 모두에 해당 될 때까지의이 .loaded 각 아틀라스를 계속 확인 사용이 코드 후

var tileAtlas = [ ]; 


function loadAtlasJSON() { 
    for (var i = 0; i < JSONpaths.length; i++) { 
     loadJSON( 
      { 
       fileName: JSONpaths[ i ], 
       success: function(atlas) {    
        console.log(atlas.id); 
        addToTileAtlas(atlas); 
       } 
      } 
     ); 
    } 
}; 


function addToTileAtlas(atlas) { 
    atlas.loaded = false; 
    var img = new Image(); 

    img.onload = function() { 
     // Logs way too soon from the previous console.log 
     console.log(atlas.id); 
     atlas.loaded = true; 
     console.log(atlas.loaded); 
    }; 

    // Always returns false, so onload has not fired yet 
    console.log(atlas.loaded); 
    img.src = atlas.src; 

    // Store the image object as an "object" property 
    atlas.object = img; 
    tileAtlas[ atlas.id ] = atlas; 
} 

:

여기 내 코드입니다. 모두 사실이면 캔버스에 이미지를 그으나 아무것도 표시되지 않습니다.

그러나 이미지를 그리기 전에 시간 제한 (1000ms)을 설정하면 이미지가 잘 그려집니다. 이것은 이미지가 실제로로드되기 전에로드가 시작된다는 것을 믿게합니다.

또한 로그의 타임 스탬프는 20-90kb 인 각 이미지의 로딩 시간을 고려하기에는 너무 가깝다고 생각합니다.

[16:12:06.209] "ground" 
[16:12:06.210] false 
[16:12:06.211] "ground-collision" 
[16:12:06.211] false 
[16:12:06.213] "objects-collision" 
[16:12:06.213] false 
[16:12:06.223] "ground" 
[16:12:06.223] true 
[16:12:06.224] "ground-collision" 
[16:12:06.224] true 
[16:12:06.225] "objects-collision" 
[16:12:06.225] true 

는 내가 온로드에 할당 된 기능은 img.onload 할당이 여전히 false를 돌려 아래 console.log(atlas.loaded); 이후 즉시 호출되지 않았 음을 알 수 있습니다.

내가 알고있는 여러 브라우저에서 이미지 캐시를 보유하고 있지 않은지 확인했습니다. 내 메인 브라우저 인 Firefox에서 network.http.use-cache 및 browser.cache.offline.enable을 false로 설정했습니다.

MAMP를 사용하는 로컬 호스트 아파치 서버에서이 코드를 테스트하고 있지만 관련이 있는지는 알 수 없습니다.

타임 아웃을 사용하여 이미지 디스플레이가 지연되는 것을 알고 있기 때문에 JSON로드 및 img.src 경로가 정확하다는 의미이기도합니다.

img.onload 화재가 너무 빨리, 난 단지 몇 가지 원인을 생각할 수 있기 때문에 :

1. 브라우저는 이미지 캐시를 가지고 있으며, 따라서는로드 본다. 그러나 그런 다음 이것이 리프레시 될 때도 이미지를 표시하지 않는 이유는 설명하지 않습니다.
2. .onload 구문/사용법이 올바르지 않습니다.

도움 주셔서 감사합니다.

Answer 1

좋아, 문제가 발견되었습니다. 내 tileAtlus 배열의 비동기 로딩으로 인한 버그였습니다. 나는 아직 정의되지 않은 배열을 반복하고있다. 내 접근 방식을 다시 평가해야 할 것입니다. 감사!