Установите объект Image в качестве фонового изображения div, используя JavaScript - PullRequest
Новая
       11

Установите объект Image в качестве фонового изображения div, используя JavaScript

11 голосов
/ 20 марта 2012

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

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

Ответы [ 2 ]

23 голосов
/ 20 марта 2012

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

0 голосов
/ 14 января 2018

Таким образом, изображение сразу отображается сразу после загрузки, а не построчно. 

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