jQuery, dynamically download image: IE doesn't know its width and its height

问题

Here my code in my head section:

   <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>

This code should download dynamically 2 images and in the drawIfOk(); function, i test if both images are downloaded. If so, then I try to create canvas based on the width & height of the image, like this:

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

    initTest();
}

Simple eh?

Now the initTest(); function is very simple:

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;
    }
}

Then IE gives me an error because bg.width and bg.height are 0 whereas it works on Safari, Chrome, Firefox and Maxthon! [Trying not to grumble about IE]

How to circumvent this?

回答1:

The MSIE problem appears to be related to its poor handling of hidden image elements.

Image elements that have been added to the DOM and then explicitly hidden cannot have their dimensions read, but it would appear that a stand-alone Image object does not have this problem.

There are also far better ways of handling the image loading synchronisation - the code below replicates most of your set up code using jQuery's "deferred objects":

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');

With usage:

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

You can then access the two images within initTest as they will be passed as parameters, and only then put them into the DOM

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

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

回答2:

I did it once like this

//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
}

来源：https://stackoverflow.com/questions/17384286/jquery-dynamically-download-image-ie-doesnt-know-its-width-and-its-height