javascript - JS / jQuery : 背景画像のオンロード

Question

背景画像が読み込まれるまで待ってから、画像の比率をコンテナーに追加し、背景画像コンテナーをフェードインする機能があります。Chrome では動作するようですが、Internet Explorer 8 および 9 では失敗し、10 では常に動作するとは限りません。 . ie8 では、jquery on('load') イベントを理解していないようです。すなわち 9 および 10 では、背景画像の幅が常に検出されるわけではありません。ie8+ やその他の主要なブラウザで動作させるにはどうすればよいですか?

js:

$('.item').each(function(index) {
    var thisItem = $(this);
    var image_url = thisItem.find('.img').css('background-image');
    var img = new Image();
    img.src = image_url.replace(/(^url\()|(\)$|[\"\'])/ig, '');
    if (image_url){
    //initialize only when background img is loaded
    var $img = $('<img>').attr('src', img.src).on('load', function(){
        //don't allow img to be larger than it is
        if(img.width < thisItem.width()){thisItem.css({'max-width':img.width+'px'});}
        var ratio = img.height/img.width;
            thisItem.find('.item_ratio').css({'padding-bottom':ratio*100+'%'});
            thisItem.find('.img').fadeIn(800);

        });
    }
});

html:

<div class="item">
    <div class="img" style="background-image:url('some_url'); width: 100%; background-size: cover;"></div>
    <div class="item_ratio"></div>

    <!-- Some other not important html ->

</div>