14

クライアントに負荷バーを表示する背景から 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 オブジェクトを使用して背景画像を設定する方法はありますか?

4

2 に答える 2

28

持っていたものに近いものを作ることができます。画像の背景を画像オブジェクトに設定しませんが、画像オブジェクト.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画像でイベントを使用する場合に注意すべきことの 1 つは、属性.onloadを設定する前にハンドラーを設定する必要があることです。.srcそうしないと.onload、画像が既にキャッシュされている場合にイベントを見逃す可能性があります (したがって、すぐに読み込まれます)。

于 2012-03-20T16:04:51.997 に答える