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 给我一个错误，因为bg.widthandbg.height是 0 而它在 Safari、Chrome、Firefox 和 Maxthon 上工作！[尽量不要抱怨 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因为它们将作为参数传递，然后才将它们放入 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 回答
0

我做过一次这样

//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
}
于 2013-06-29T20:32:35.100 回答