javascript 获得 table 中所有图像的自然 width/height

Question

我正在尝试从 Image 列中列出的图像中获取实际图像尺寸，并将其显示在 Image Size 列中。

我遇到的问题是我只能获取第一张图片的大小，该图片会添加到 Image Size.

列的每个单元格中

jsFiddle: https://jsfiddle.net/a92ck0em/

  var xmlFile = 'https://raw.githubusercontent.com/joenbergen/files/master/XMLParse2.xml';

  function loadDoc() {
    var xhttp = new XMLHttpRequest();

    xhttp.open("GET", xmlFile, true);
    xhttp.send();
    xhttp.onreadystatechange = function() {
      if (this.readyState === 4 && this.status === 200) {
        xmlFunction(this.response);
      }
    };

  }

  function xmlFunction(xml) {
    var parser = new DOMParser();
    var xmlDoc = parser.parseFromString(xml, "text/xml");
    var table = "<tr><th>Category</th><th>Title</th><th>Image</th><th>Image Size</th></tr>";
    var x = xmlDoc.getElementsByTagName("ITEM");
    for (var elem of x) {
      var titles = elem.getElementsByTagName(
        "TITLE")[0].childNodes[0].nodeValue;
      var cats = elem.getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue;
      var imageURL = elem.getElementsByTagName("IMAGE").length === 0 ? "..." : elem.getElementsByTagName("IMAGE")[0].getAttribute('url');
      var imageSize = elem.getElementsByTagName("IMAGE").length === 0 ? "..." : elem.getElementsByTagName("IMAGE")[0].width + 'x' + [0].height;

      table += "<tr><td>" + cats + "</td><td>" + titles + "</td><td>" + "<img src=" + imageURL + ' height="150" width="100">' + '</td><td id="cellId"><textTag>' + "" + "</textTag></td></tr>";
    }
    document.getElementById("myTable").innerHTML = table;
  
    document.querySelector("img").addEventListener('load', function() {
      var imgTags = document.querySelectorAll('img'), i;
      for (i = 0; i < imgTags.length; ++i) {
          var image_width = document.querySelector("img").naturalWidth;
          var image_height = document.querySelector("img").naturalHeight;
      }
      $('#myTable textTag').each(function() {
      $(this).append(image_width + 'x' + image_height);
      //console.log(image_width + 'x' + image_height);
      });
    });
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
}

<head>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<button type="button" onclick="loadDoc()">Load</button>
<br><br>
<table id="myTable"></table>

预期：

Answer 1

问题是您需要等待图像加载后才能查询 width 或 height 等属性。

通常这是通过设置更新这些属性显示的 onload 事件处理程序来完成的。

此外，您正在循环设置两个变量，然后在循环外为所有图像分配相同变量的值。

您需要在第二个循环内进行查询。

Answer 2

好的，你的问题有很多部分，我开始做最简单的事情，记录已解析的 xml 文档，如下所示：

...
<IMAGE url="...."></IMAGE>
<IMAGESIZE></IMAGESIZE>
...

因此在您的脚本中您得到了一个不存在的属性。所以你可以安全地删除这一行：

var imageSize = elem.getElementsByTagName("IMAGE").length === 0 ? "..." : elem.getElementsByTagName("IMAGE")[0].width + 'x' + [0].height;

接下来您需要检查图像是否已加载，最简单的做法是：

"<img src=" + imageURL + ' height="150" width="100" onload="this._loaded = true;">' +

这将为其添加专有 _loaded 属性。

接下来您需要检查图像何时加载，加载后会触发一个函数，您需要一个递归函数来执行不会破坏堆栈的操作：

var imgTags = document.getElementsByTagName('img');
    function isLoaded(){
        if(Array.prototype.slice.call(imgTags).some(function(d,i){return !d._loaded})){
        setTimeout(isLoaded,4);
      } else {
        $('#myTable textTag').each(function(i,node) {
         node.textContent = imgTags[i].naturalWidth + 'x' + imgTags[i].naturalHeight;
          //console.log(image_width + 'x' + image_height);
        });
      }
    };
    isLoaded();

我删除了 querySelectorAll(img) 位，它比 getElementsByTagName 慢并且不会 return LIVE HTML Collection，returns NodeList.一旦检测到所有 _loaded 属性，加载的函数就会触发你的 Jquery 东西。 Array.prototype.slice.call 是一种将 HTML Collection 或 NodeList 转换为常规数组的老派方法，现在 Array.from 的酷孩子们，这取决于您。您还可以通过存储一次 Array.prototype.slice.call... 的结果来稍微优化上述功能，我将其留给您。总而言之，它看起来像这样：

https://jsfiddle.net/ibowankenobi/h9evc81a/

javascript 获得 table 中所有图像的自然 width/height

javascript get natural width/height of all images in table

javascript

html-table

image-size