javascript - 背景 (css) 画像が読み込まれたことを確認するには?

Question

<td>タグに適用する次の CSS クラスがあります。

.bg {
   background-image: url('bg.jpg');
   display: none;
}

背景画像の読み込みが完了したことを JavaScript/jQuery で確認するにはどうすればよいですか?

Answer 1

私が知っている唯一の方法は、Javascript を使用して画像を読み込み、その画像を背景として設定することです。

例えば：

var bgImg = new Image();
bgImg.onload = function(){
   myDiv.style.backgroundImage = 'url(' + bgImg.src + ')';
};
bgImg.src = imageLocation;

Answer 2

visibility:hidden最初のページの読み込み時にクラスを div に渡します。そうすれば、クラスを表のセルに割り当てるときに、ブラウザーのキャッシュに既に存在します。

Answer 3

この記事が役立つかもしれません。関連セクション:

// Once the document is loaded, check to see if the
// image has loaded.
$(
    function(){
        var jImg = $( "img:first" );

        // Alert the image "complete" flag using the
        // attr() method as well as the DOM property.
        alert(
            "attr(): " +
            jImg.attr( "complete" ) + "\n\n" +

            ".complete: " +
            jImg[ 0 ].complete + "\n\n" +

            "getAttribute(): " +
            jImg[ 0 ].getAttribute( "complete" )
        );
    }
);

基本的に背景画像を選択し、チェックを行ってロードされていることを確認します。

Answer 4

@Jamie Dixon - 彼は背景画像で何かをしたいとは言いませんでした。

$(function( )
{
    var a = new Image;
    a.onload = function( ){ /* do whatever */ };
    a.src = $( 'body' ).css( 'background-image' );
});