在图像负载上获得图像宽度在IE上失败

Question

我有一个图像恢复函数，该函数调整图像的大小比例。在每个图像上，加载呼叫此功能，并调整其宽度或高度是否大于我的最大宽度和最大高度。我可以在FF Chrome Opera Safari中获得IMG.Width和IMG.Height，但即失败。我该如何处理？

让我用一块代码解释。

<img src="images/img01.png" onload="window.onImageLoad(this, 120, 120)" />

function onImageLoad(img, maxWidth, maxHeight) {
     var width = img.width; // Problem is in here
     var Height = img.Height // Problem is in here
}

在我的较高的线条中，img.width不起作用IE系列。

有建议吗？

谢谢。

Answer 1

不要使用 width 和 height. 。利用 naturalWidth 和 naturalHeight 反而。这些提供来自图像文件的图像未刻录的像素尺寸，并将跨浏览器工作。

Answer 2

伙计，我一直在寻找这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'
   });

这在FF，Opera和Safari中工作，但没有IE。我在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
   });

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

Answer 4

这是因为IE无法计算宽度和高度 display: none 图片。利用 visibility: hidden 反而。

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

 }

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

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
}

编辑 - 显然，如果我要尝试的话，我会学到它不起作用:-)好吧，“宽度”和“高度”似乎绝对是属性 <img> 就IE而言，元素。也许问题是“负载”事件在错误的时间为元素发射。要检查是否是这种情况，我将尝试以下操作：

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

Answer 8

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