JavaScript/jQuery：DOMコマンドを実行する* after * img.onloadコマンド

Question

CSSの背景画像の高さを&の高さにしてdocument.ready javascriptに挿入する必要があります。ような何か：

$(document).ready(function(){ 
    img = new Image(); 
    img.src = "images/tester.jpg"; 


    $('body').css('background', 'url(' + img.src + ')'); 
    $('body').css('background-size', img.width + 'px' + img.height + 'px'); 
}); 

問題があるが、画像の幅と高さはdocument.readyの時にロードされていないので、値は空白になっています。 （コンソールからはアクセスできますが、以前はアクセスできません）。

img.onload = function() { ... }は幅と高さを取得しますが、DOM $(element)呼び出しはimg.onloadからアクセスできません。

要するに、私はjavascriptでちょっと錆びていて、画像パラメータをDOMに同期させる方法を理解できません。任意のヘルプをいただきありがとう

編集：jQueryのバージョンは1.4.4です、更新することはできません。

Answer 1

$.holdReady()を使用すると、jQueryのreadyメソッドがすべての画像がロードされるまで実行されないようにすることができます。その時点で、幅と高さはすぐに利用可能になります。

スターを呼び出して$.holdReady(true)を呼び出します。各画像のonloadメソッド内で、一度にどれだけの画像がロードされたかを確認し、予想される画像の数と一致する場合は、$.holdReady(false)を実行して準備完了イベントを発生させることができます。

あなたは$.holdReady()へのアクセス権を持っていない場合は、すべての画像はまだ関数を呼び出すことによってロードされるまで、単にあなたのHTMLを吐き出すために待つことができます：

var images = { 'loaded': 0, 
       'images': [ 
       "http://placekitten.com/500/500", 
       "http://placekitten.com/450/450", 
       "http://placekitten.com/400/400", 
       "http://placekitten.com/350/340", 
       "http://placekitten.com/300/300", 
       "http://placekitten.com/250/250", 
       "http://placekitten.com/200/200", 
       "http://placekitten.com/150/150", 
       "http://placekitten.com/100/100" 
       ]}; 

function outputMarkup() { 
    if (++images.loaded === images.images.length) { 
    /* Draw HTML with Image Widths */ 
    } 
} 

for (var i = 0; i < images.images.length; i++) { 
    var img = new Image(); 
    img.onload = function(){ 
    outputMarkup(); 
    }; 
    img.src = images.images[i]; 
}