0

src 属性を透過ピクセルに設定した後、img タグに背景画像を表示する際に問題が発生しました。

HTML:

<img class="test-class" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png">

CSS:

.test-class {
    border: 1px black solid;
    width: 256px;
    height: 256px;
}

JavaScript:

var transparentPng = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAE0lEQVR4XgXAAQ0AAABAMP1L38IF/gL+/AQ1bQAAAABJRU5ErkJggg==";
var spriteUrl = "url(http://upload.wikimedia.org/wikipedia/commons/9/9a/Google_Chrome_screenshot.png)"

// Why doesn't background image show?
$(".test-class").attr("src", transparentPng);

// It does show if src is set to a broken URL, though.
//$(".test-class").attr("src", "invalidurl");

$(".test-class").css("background-image", spriteUrl);

ライブ テスト ケースは次のとおりです: http://jsfiddle.net/rmjaD/1/

本当はスプライトを表示したいのですが、スプライトの画像がかなり大きくなり、イベントでしか表示されないので、imageタグのsrc属性を使って初期画像を表示しています。イベントが発生したら、その画像をスプライトに置き換えたいと思います。これを実現するために、私の考えは、ソース画像を透明なピクセルに置き換え、背景画像を設定することです。しかし、何らかの理由で背景画像が表示されません。

大きな画像 (スプライトを表す) を表示するには、テスト ケースで何を変更する必要があるか教えてください。

4

2 に答える 2

1

使用している画像に問題があるようです。

この画像を使用します。できます。

var transparentPng = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=";
于 2013-04-20T18:53:17.677 に答える