자바 스크립트에서 이미지를 하나씩로드하십시오.

Question

내 문제는 여러 이미지가 있고 프리 로더처럼로드하고 싶지만 문제는 첫 번째 이미지를 완료 한 후 두 번째 이미지의로드를 시작한다는 것입니다. 현재 코드에서는 모든 이미지를 하나의 배열에 저장하고 루프를 사용하여 모든 이미지를로드 (배열의 모든 이미지 소스를 이미지 객체에 제공) 한 다음 모든 이미지로드를 시작합니다.

Answer 1

로드 이벤트를보고 싶습니다.

function loadImagesInSequence(images) { 
    if (!images.length) { 
    return; 
    } 

    var img = new Image(), 
     url = images.shift(); 

    img.onload = function(){ loadImagesInSequence(images) }; 
    img.src = url; 
} 

loadImagesInSequence(['a.png', 'b.png', 'c.png']); 

이미지가로드 될 때마다로드 이벤트가 발생합니다. 그런 일이 발생하면 loadImagesInSequence()를 다시 실행합니다. 우리는 단순히 통과 한 배열에서 Array.shift()을 제거하여 동일한 이미지를 두 번로드하지 않습니다.