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属性を使って初期画像を表示しています。イベントが発生したら、その画像をスプライトに置き換えたいと思います。これを実現するために、私の考えは、ソース画像を透明なピクセルに置き換え、背景画像を設定することです。しかし、何らかの理由で背景画像が表示されません。
大きな画像 (スプライトを表す) を表示するには、テスト ケースで何を変更する必要があるか教えてください。