자바 스크립트를 사용하여 이미지 객체를 div 배경 이미지로 설정

Question

로드 막대를 나타내는 배경에서 이미지 4 개를 클라이언트에로드하려면
이미지가 다운로드 될 때 이미지를 4 개의 div 블록으로 배경 이미지로 설정하고 싶습니다. .

나는 이와 비슷한 것을 찾고있다.

var myImages = new Array(); 
for(var i = 0; i < 4; i++) 
    myImages[i] = new Image(); 
//load images using the src attribute 
//and execute an on load event function where to do something like this. 
var div0 = document.getElementById('theDivId'); 
div0.style.backgroundImage = myImage[index]; 

이미지 자바 스크립트 개체를 사용하여 배경 이미지를 설정할 수있는 방법이 있습니까?

Answer 1

당신이 가진 것에 가깝게 할 수 있습니다. 이미지 배경을 이미지 객체로 설정하지는 않지만 이미지 객체에서 .src 속성을 가져 와서 backgroundImage에 적용 할 수 있습니다. 이미지 객체가 성공적으로로드되면 이미지가 브라우저에 의해 캐시되므로 다른 객체에 .src를 설정하면 이미지가 빠르게로드됩니다. 당신은 코드의이 유형을 사용할 수 있습니다

var imgSrcs = [...]; // array of URLs 
var myImages = [], img; 
for (var i = 0; i < 4; i++) { 
    img = new Image(); 
    img.onload = function() { 
     // decide which object on the page to load this image into 
     // this part of the code is missing because you haven't explained how you 
     // want it to work 
     var div0 = document.getElementById('theDivId'); 
     div0.style.backgroundImage = "url(" + this.src + ")"; 
    }; 
    img.src = imgSrcs[i]; 
    myImages[i] = img; 
} 

이미지 그냥 하나 하나에로드 된 이미지로드가 성공적으로 예 서서 경우에로드 페이지에 개체를 결정하는이 코드의 누락 된 부분 모든 페이지가로드되는 즉시 동일한 페이지 객체가 표시됩니다. 내가 원하는 것을 알지 못하고 지정하지 않은 것처럼 코드의 해당 부분을 채울 수 없습니다.

.onload 이벤트를 이미지와 함께 사용하는 경우주의해야 할 점은 .src 특성을 설정하기 전에 .onload 처리기를 설정해야한다는 것입니다. 그렇지 않으면 이미지가 이미 캐시 된 (즉, 즉시로드되는 경우) .onload 이벤트가 누락 될 수 있습니다.

Answer 2

이렇게하면 이미지가 한 행씩로드되지 않고 즉시 한 번에 모두 표시됩니다.

function setBackgroundImage(){ 
    imageIsLoaded(myURL).then(function(value) { 
     doc.querySelector("body > main").style.backgroundImage = "url(" + myURL + ")"; 
    } 
} 
function imageIsLoaded(url){ 
    return new Promise(function(resolve, reject){ 
     var img = new Image(); 
     try { 
      img.addEventListener('load', function() { 
       resolve (true); 
      }, false); 
      img.addEventListener('error', function() { 
       resolve (false); 
      }, false);  
     } 
     catch(error) { 
      resolve (false); 
     } 
     img.src = url; 
    });   
}