Задайте объект изображения как фоновое изображение div с помощью javascript

Я хочу загрузить 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];

Есть ли способ установить фоновое изображение с помощью объекта JavaScript javascript?

Ответы

Ответ 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 с изображениями, - это установить обработчик .onload, прежде чем устанавливать атрибут .src. Если вы этого не сделаете, вы можете пропустить событие .onload, если изображение уже кэшировано (и, следовательно, оно сразу загружается).

Ответ 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;
    });        
}