在图像加载时获取图像宽度在IE上失败。

Question

我有一个图片缩放函数，可以按比例缩放图片。每次加载图像时，用该函数调整大小，如果它的宽度或高度大于我的最大宽度和最大高度。在FF Chrome Opera Safari中，我可以使用img.width和img.height获取图像的宽度和高度，但在IE中会失败。如何解决这个问题？

让我用一段代码来说明。

<img src="images/img01.png" onload="window.onImageLoad(this, 120, 120)" />
function onImageLoad(img, maxWidth, maxHeight) {
     var width = img.width; // 问题就在这里
     var height = img.height // 问题就在这里
}

在我标记的行中，img.width不能在IE系列上工作。

有什么建议吗？

谢谢。

- Fatih Acet

---

你尝试过 img.currentStyle.width 吗？ - Pointy

@Fatih建议：不要像那样在HTML中混合JavaScript（onload属性）。仅使用JS动态附加事件处理程序。 - Phrogz

在这里使用IE 8运行良好：http://jsbin.com/ehovu4/#noedit - Crescent Fresh

我已经找到问题了。愚蠢的IE无法计算display:none;图像的宽度和高度。我将图片的可见性设置为hidden;然后一切都可以正常工作，但在图片加载之前会出现水平和垂直滚动条。 - Fatih Acet

+1 对于 display:none 提示 - roberkules

Answer 1

不要使用width和height，改用naturalWidth和naturalHeight。这将从图像文件提供未经缩放的像素尺寸，并可在各种浏览器中使用。

- izb

---

在我看来，这是页面上最好的答案，应该被接受。 - Jack

在IE 8中，您可以通过创建一个Image实例，将src设置为所需的图像，并获取该实例的尺寸来获得自然宽度：function onImageLoad(img, maxWidth, maxHeight) { var ghost = new Image(); ghost.src = img.src; var width = ghost.width; var height = ghost.height ... } - kfriend

Answer 2

我已经寻找了两天，终于找到了。谢谢。

我正在使用jQuery，但这并不重要。问题与IE中的javascript有关。

我的以前的代码：

var parentItem = $('<div/>')
   .hide();      // sets display to 'none'

var childImage = $('<img/>')
   .attr("src", src)
   .appendTo(parentItem)   // sets parent to image
   .load(function(){
      alert(this.width);  // at this point image is not displayed, because parents display parameter is set to 'none' - IE gives you value '0'
   });

这段代码在Firefox、Opera和Safari中可以正常工作，但在IE浏览器中却得到了'0'的结果。

我的解决方法是：

var parentItem = $('<div/>')
   .hide();

var childImage = $('<img/>')
   .attr("src", src)
   .load(function(){
      alert(this.width);  // at this point image css display is NOT 'none'  - IE gives you correct value
      childImage.appendTo(parentItem);   // sets parent to image
   });

- m4js7er

Answer 3

这是我解决它的方法（因为它是网站上唯一的js，我不想使用库）。

    var imageElement = document.createElement('img');
    imageElement.src = el.href; // taken from a link cuz I want it to work even with no script
    imageElement.style.display      = 'none';

    var imageLoader = new Image();
    imageLoader.src = el.href;
    imageLoader.onload = function() {
        loaderElement.parentElement.removeChild(loaderElement);
        imageElement.style.position     = 'absolute';
        imageElement.style.top          = '50%';
        imageElement.style.left         = '50%';
        // here using the imageLoaders size instead of the imageElement..
        imageElement.style.marginTop    = '-' + (parseInt(imageLoader.height) / 2) + 'px';
        imageElement.style.marginLeft   = '-' + (parseInt(imageLoader.width) / 2) + 'px';
        imageElement.style.display      = 'block';
    }

- Thomas Hartvig

Answer 4

由于IE无法计算"display: none"图像的宽度和高度，因此请改用"visibility: hidden"。

- Fatih Acet

---

请注意，工作样例/失败样例的链接会导致 HTTP 404 错误。 - Scott Mitchell

Answer 5

尝试

 function onImageLoad(img, maxWidth, maxHeight) {
   var width = img.width; // Problem is in here
   var height = img.height // Problem is in here
   if (height==0  && img.complete){
       setTimeOut(function(){onImageLoad(img, maxWidth, maxHeight);},50);
   }

 }

- Phenomenal

Answer 6

    var screenW = screen.width;
    var screenH = screen.height;
    //alert( screenW );
    function checkFotoWidth( img, maxw )
    {
        if( maxw==undefined)
            maxw = 200;
        var imgW = GetImageWidth(img.src);
        var imgH = GetImageHeight(img.src);
            //alert(GetImageWidth(img.src).toString()); // img.width); // objToString(img));
        if (imgW > maxw || (img.style.cursor == "hand" && imgW == maxw))
        {
            if (imgW > screenW) winW = screenW;
            else winW = imgW;

            if (imgH > screenH) winH = screenH;
            else winH = imgH;

            img.width=maxw;
            img.style.cursor = "pointer";

            img.WinW = winW;
            img.WinH = winH;
            //alert("winW : " + img.WinW);
            img.onclick = function() { openCenteredWindow("Dialogs/ZoomWin.aspx?img=" + this.src, this.WinW, this.WinH, '', 'resizable=1'); }
            img.alt = "Klik voor een uitvergroting :: click to enlarge :: klicken Sie um das Bild zu vergrössern";
            //alert("adding onclick);
        }
    }

    function GetImageWidth(imgSrc) 
    {
        var img = new Image();
        img.src = imgSrc;
        return img.width;
    } 

    function GetImageHeight(imgSrc) 
    {
        var img = new Image();
        img.src = imgSrc;
        return img.height;
    } 

- Run CMD

---

最好先隐藏您的图像，然后在调整大小后再显示它。否则，使用大型图像会出现闪烁效果。 - Run CMD

Answer 7

我会尝试这个：

function onImageLoad(img, maxWidth, maxHeight) {
   var width, height;
   if ('currentStyle' in img) {
     width = img.currentStyle.width;
     height = img.currentStyle.height;
   }
   else {
     width = img.width;
     height = img.height;
   }
   // whatever
}

编辑——显然，如果我尝试这样做，我会发现它不起作用:-)好的，那么“width”和“height”对于IE来说绝对是<img>元素的属性。也许问题在于“load”事件在错误的时间触发了该元素。为了检查是否如此，我将尝试以下操作：

function onImageLoad(img, maxWidth, maxHeight) {
   var width, height;
   var i = new Image();
   i.onload = function() {
     width = i.width; height = i.height;
     // ... stuff you want to do ...
   };
   i.src = img.href;
}

- Pointy

---

哎呀，糟糕了 :-) 唉，这就是IE的特点。让我想一下。 - Pointy

offsetWidth/offsetHeight怎么样？我怀疑即使宽度/高度返回“auto”，它们也能正常工作。 - Phrogz

@Phrogz 的 offsetWidth/offsetHeight 返回 0。 - Fatih Acet

@Fatih，那看起来很糟糕啊。图片肯定已经加载了吗？我个人会通过在load事件中添加一个setTimeout(...,1)来进行hack，以便在请求尺寸之前再给它一次重新布局页面的机会。 - Phrogz

如果IE不欺骗我们，因为该函数正在调用图像加载，我们可以确定图像已加载。我想，我已经完成了。请检查我写的问题第三个评论。 - Fatih Acet

Answer 8

getDisplay().getImage().setUrl(imgURL);
final Image img = new Image(imgURL);
int w=img.getWidth();
int h=img.getHeight();

- Moe

---

问题涉及JavaScript。 - Palpatim