Question

我的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给我一个错误，因为bg.width和bg.height为0，而它适用于Safari，Chrome，Firefox和Maxthon！ [尽量不要抱怨IE]

如何规避这个？

Answer 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中的两个图像，因为它们将作为参数传递，只有然后将它们放入DOM

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

    // add to the DOM
    $('body').append(gImgMetro, bg);
}

Answer 2

我这样做了一次

//set image's src here

var $pomImg = new Image();
$pomImg.src = $src;
$pomImg.onload = function(){
    initTest(); //do something here (maybe load second image the same way)
}
if($pomImg.complete == true){
    initTest(); //do something here
}

jQuery，动态下载图像：IE不知道它的宽度和高度

2 个答案: