0

ここに私のセクションの私のコードhead:

   <script src="jquery-1.10.1.min.js"></script>
   <script src="metro.js"></script>
   <script src="draw.js"></script>
   <script>
       $(document).ready(function() {
           var im = $('<img />')
               .attr({id: 'metro', src:'metro.png'})
               .appendTo($('body'))
               .hide()
               .on('load', function() {
                   okIm = true;
                   drawIfOk();
               });
           var bg = $('<img />')
               .attr({id: 'back', src:'back.png'})
               .appendTo($('body'))
               .hide()
               .on('load', function() {
                   okBg = true;
                   drawIfOk();
               });
       });
   </script>

このコードは動的に 2 つの画像をダウンロードする必要があり、drawIfOk();関数で両方の画像がダウンロードされているかどうかをテストします。もしそうなら、次のように、画像の幅と高さに基づいてキャンバスを作成しようとします:

function drawIfOk() {
    if (!okIm) {
        return;
    }
    if (!okBg) {
        return;
    }

    initTest();
}

シンプルでしょ？

initTest();関数は非常に単純になりました。

function initTest() {
    gImgMetro = $('#metro')[0];
    var bg = $('#back')[0];

    /* Création du canvas */
    gImgCanvas = $('<canvas />').attr({
        width: bg.width,
        height: bg.height
    })[0];
    gImgCtx = gImgCanvas.getContext('2d');
    if(!gImgCtx) {
        displayError("Impossible de récupérer le context du canvas");
        return;
    }
}

次に、IE はSafari、Chrome、Firefox、および Maxthon で動作するのにbg.widthとが 0 であるため、エラーを返します! bg.height【IEについて愚痴をこぼさないように】

これを回避する方法は？

4

2 に答える 2

1

MSIE の問題は、非表示の画像要素の処理が不十分であることに関連しているようです。

DOM に追加され、明示的に非表示にされた画像要素は、その寸法を読み取ることができませんが、スタンドアロンImageオブジェクトにはこの問題がないように見えます。

画像読み込みの同期を処理するためのはるかに優れた方法もあります。以下のコードは、jQuery の「遅延オブジェクト」を使用して設定コードのほとんどを複製しています。

function loadImage(id, url) {
    return $.Deferred(function(def) {
       var img = new Image();
       $(img).one('load', function() {
          def.resolve(img);
       }).hide().appendTo(document.body);
       img.id = id;
       img.src = url;
    }).promise();
}

var im = loadImage('metro', 'metro.png');
var bg = loadImage('back', 'back.png');

使用法:

$.when(im, bg).done(initTest);

その後initTest、パラメーターとして渡される2 つの画像にアクセスし、それらを DOM に入れることができます。

function initTest(gImgMetro, bg) {
    // bg.width *should* be available here
    ...

    // add to the DOM
    $('body').append(gImgMetro, bg);
}
于 2013-06-29T20:33:02.007 に答える