jQuery，动态下载图片：IE不知道它的宽度和高度 [英] jQuery, dynamically download image: IE doesn't know its width and its height

问题描述

这里我的代码在头部分：

   <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 / code>函数，我测试如果两个图像都下载。如果是这样，那么我尝试基于宽度&图像的高度，像这样：

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

简单eh？

现在 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！

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]

推荐答案

MSIE问题似乎与隐藏图片元素的处理不佳有关。

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

已添加到DOM然后显式隐藏的图片元素不能尺寸读取，但是似乎一个独立的 Image 对象没有这个问题。

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.

还可以更好地处理图片加载同步 - 下面的代码使用jQuery的延迟对象复制了大多数设置代码：

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

使用方法：

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

然后，您可以访问 initTest ，因为它们将作为参数传递，只有然后将它们放入DOM

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

这篇关于jQuery，动态下载图片：IE不知道它的宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！