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

8 回答

• 3

  不要使用 width 和 height . 请改用 naturalWidth 和 naturalHeight . 它们提供了图像文件中未缩放图像尺寸的图像，可以在浏览器中使用 .

  回复于 2024-05-16T23:19:09+08:00
• -1

  伙计，我正在寻找这个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
     });
  

  回复于 2024-05-16T23:19:09+08:00
• 0

  这就是我解决它的方式（因为它是网站上我唯一不想使用库的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';
      }
  

  回复于 2024-05-16T23:19:09+08:00
• 0

  它's because IE can' t计算 display: none 图像的宽度和高度 . 请改用 visibility: hidden .

  回复于 2024-05-16T23:19:09+08:00
• 1

  尝试

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

  回复于 2024-05-16T23:19:09+08:00
• 1

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

  回复于 2024-05-16T23:19:09+08:00
• 4

  我试试这个：

  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
  }
  

  编辑 - 显然，如果我尝试我'd learn it doesn' t工作:-)好吧，好的"width"和"height"肯定似乎是 <img> 元素的属性，就IE而言 . 也许问题是"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;
  }
  

  回复于 2024-05-16T23:19:09+08:00
• 22

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

  回复于 2024-05-16T23:19:09+08:00