Question

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

我遇到的问题是我只能获得第一张图像的大小，该图像被添加到图像大小列的每个单元格中。

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慢，并且没有返回实况HTML Collection，返回了NodeList。一旦检测到所有_loaded属性，加载的函数将触发您的Jquery事物。 Array.prototype.slice.call是一种古老的方法，可以将HTML Collection或NodeList转换为常规数组，Array.from如今是您最酷的孩子，这取决于您。您还可以通过一次存储Array.prototype.slice.call...的结果来稍微优化上述功能，我留给您。总而言之，它看起来像这样：

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

javascript获取表格中所有图像的自然宽度/高度

2 个答案: