jquery - CSS background-image が完全にロードされたときの JQuery bind イベント

Question

背景画像が完全に読み込まれた後にイベントをトリガーしたいと思います。画像は、動的な PHP スクリプトから作成されます。

$("#box").css("background-image","url(image.php)");

多分私は目に見えない画像を取得しようとすることができ<img>、画像の読み込み（.load（））がその目に見えないsrcで背景画像を設定するときは<img>？わからない...

ご協力ありがとうございました。

Answer 1

これに役立つwaitForImagesと呼ばれる私のjQueryプラグインを使用できます...

$("#box").css("background-image", "url(image.php)").waitForImages({
   waitForAll: true,
   finished: function() {
       // Background image has loaded.
   }
});

それ以外の場合は、手動で行うには...

var image = 'image.php',

    img = $('<img />');

img.bind('load', function() {
     // Background image has loaded.
});

img.attr('src', image);

$('#box').css('background-image', 'url(' + image + ')');

Answer 2

$("#box img").load(function() {  
    //the image elements in #box are fully loaded.
});