web-dev-qa-db-ja.com

javascriptを使用してImageオブジェクトをdiv背景画像として設定します

ロードバーを示す背景から4枚の画像をクライアントにロードしたい
そして画像がダウンロードされるとき、私はそれらを背景画像として4divブロックに設定したいと思います。

私はこのようなものを探しています。

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オブジェクトを使用して背景画像を設定する方法はありますか？

javascriptbackground-imageloadimage
11
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イベントを見逃す可能性があります（したがって、すぐに読み込まれます）。

24
jfriend00

このように、画像は1行ずつではなく、読み込まれるとすぐに1つにまとめて表示されます。

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;
    });        
}
0
Ronnie Royston