使用javascript設置一個圖像對象作爲div背景圖像

我想從後臺加載4個圖像，顯示一個加載條到客戶端
當圖像將被下載時，我想將它們設置爲4個div塊的背景圖像。使用javascript設置一個圖像對象作爲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];

有沒有什麼辦法可以用Image javascript對象設置背景圖片？

來源

2012-03-20 George Siggouroglou

你可以做些什麼接近你的。您不會將圖像背景設置爲圖像對象，但您可以從圖像對象獲取.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事件與圖像一起使用時，需要注意的一件事是必須先設置.onload處理程序，然後再設置.src屬性。如果你不這樣做，你可能會錯過.onload事件，如果圖像已被緩存（因此它立即加載）。

來源

2012-03-20 16:04:51 jfriend00

我谷歌很多，找到是否有任何方式來設置圖像對象作爲背景圖像，但你的解決方案是最接近我想要的。 – 2012-03-20 16:48:00

簡單，優雅。 ...一件事：可以使用onerror進行備份/ 404的。 – 2017-12-14 19:56:20

通過這種方式，一旦圖像被加載而不是逐行顯示，圖像立即顯示出來。

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; 
    });   
}

來源

2018-01-13 22:52:03

使用javascript設置一個圖像對象作爲div背景圖像

回答

相關問題