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

Posted 2023-03-05

【中文标题】在 IE 上获取图像加载时的图像宽度失败

【英文标题】：Getting image width on image load fails on IE

【发布时间】：2011-05-27 04:54:06

【问题描述】：

我有一个图像缩放功能，可以按比例调整图像大小。在每个图像加载时，如果它的宽度或高度大于我的最大宽度和最大高度，则使用图像调用此函数并调整大小。我可以在 FF Chrome Opera Safari 中获取 img.width 和 img.height 但 IE 失败。我该如何处理？

让我用一段代码解释一下。

函数 onImageLoad(img, maxWidth, maxHeight) var width = img.width; // 问题出在这里 var height = img.height // 问题出在这里

在我的高亮行中，img.width 不适用于 IE 系列。

有什么建议吗？

谢谢。

【问题讨论】：

你试过img.currentStyle.width吗？？

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

在 IE 8 中运行良好：jsbin.com/ehovu4/#noedit

我找到了问题所在。愚蠢的IE无法计算显示：无；图像的宽度和高度。我已设置图像可见性：隐藏；然后一切正常，但直到图像加载水平和垂直滚动条才看到。

+1 表示display:none 提示

【参考方案1】：

不要使用width 和height。请改用naturalWidth 和naturalHeight。这些提供了图像文件中未缩放的图像像素尺寸，并且可以跨浏览器使用。

【讨论】：

恕我直言，这是页面上的最佳答案，应该是公认的答案。

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

【参考方案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
   );

【参考方案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';
    

【参考方案4】：

这是因为 IE 无法计算 display: none 图像的宽度和高度。请改用visibility: hidden。

【讨论】：

仅供参考，工作示例/失败的示例链接会导致 HTTP 404 错误。

【参考方案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);
   

 

【参考方案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;
     

【讨论】：

最好先隐藏您的图像，然后在调整大小后显示它。否则你会得到大图像的闪烁效果。

【参考方案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

edit — 显然，如果我尝试一下，我会发现它不起作用 :-) 好吧，“宽度”和“高度”似乎肯定是 @987654322 的属性@元素就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;

【讨论】：

它返回“自动”。但我需要确切的宽度和高度，我的意思是尺寸

哦，废话 :-) 好吧，这就是适合你的 IE。让我考虑一下。

offsetWidth/offsetHeight 怎么样？我怀疑即使宽度/高度返回auto，这些也会起作用。

@Phrogz offsetWidth/offsetHeight 返回 0

@Fatih 那看起来很糟糕。图像确定加载了吗？我个人会通过添加一个从load 事件开始的setTimeout(...,1) 来破解它，让它有更多机会在询问尺寸之前重新布局页面。

【参考方案8】：

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

【讨论】：

问题是关于JavaScript的