1 
<style>
    .image {
        width: 136px;
        height: 23px;
        background-color: red;
        background-image: url(placeholder.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: auto 100%;
    }

    .image.real {
        background-color: blue;
    }
</style>
<div id="image" class="image"></div>

上記のレイアウトでは、URL から別の画像を取得し、画像を取得した後、別のクラスを div に追加し、その背景画像の URL をこの新しい URL に設定したいと考えています。何かのようなもの：

var image = document.getElementById('image');
image.className += ' real';
image.style.backgroundImage = 'url(http://www.example.com/real.png)';

ただし、画像が存在しない場合に問題が発生します。このようなことをして、クラス名を追加しreal、画像が存在する場合にのみ URL を変更するにはどうすればよいですか?

AJAXリクエストをして成功するかどうかを確認し、成功した場合はクラス名とURLを設定することを考えていましたが、より良い方法があるかどうか疑問に思っています。

(フィドル)

4

2 に答える 2

1

ネイティブ JavaScript を使用した例を次に示します。

背景として適用する前に、画像が存在する (ロードできる) かどうかを確認する必要があります。

この問題は以前に次の方法で解決されました。

JavaScriptチェック画像の有無

これは、画像が存在するかどうかを確認するためのネイティブ JavaScript メソッドを提供します。

コードは次のようになります。

var image = document.getElementById('image');
image.src = "http://www.example.com/real.png";

image.onerror = function( ) {
    /* do some appropriate action... */
}​​​​​​​​​​​​​​​​​
img.onload = function( ) {
    image.className += ' real';
    image.style.backgroundImage = 'url(http://www.example.com/real.png)';
}

コメント

画像をロードするためのサーバーのオーバーヘッドが、AJAX リクエストの作成に関連するオーバーヘッドよりも小さいかどうかはわかりません。他の誰かがコメントできるかもしれません。

于 2013-09-08T17:22:53.663 に答える
1

これはjQueryを使用した例です

新しい画像要素を作成し、DOM にアタッチしてイベントをリッスンする必要があると思います。

var image = $('<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Hopetoun_falls.jpg/300px-Hopetoun_falls.jpg" />');
image.on("load", function() {
    // add the class here
    invisibleContainer.remove();
    console.log("loaded");
});
image.on("error", function() {
    // do something if the image is missing
    console.log("image is missing");
});
var invisibleContainer = $('<div></div>');
invisibleContainer.css("display", "none");
$('body').append(invisibleContainer);

JSfiddle http://jsfiddle.net/qkXZ4/

于 2013-09-08T17:03:45.483 に答える