JavaScript的获得表中的所有图像的自然宽度/高度

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

好吧有很多地方你的问题，我开始做最简单的事情，日志记录解析的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并没有返回LIVE HTML Collection，返回NodeList。加载的功能将会启动您的jQuery的东西一旦检测到所有的_loaded属性。该Array.prototype.slice.call是一个老同学的方式来HTML Collection或NodeList转换为常规阵列，你Array.from时下时尚的年轻人，这是给你。您也可以通过存储Array.prototype.slice.call...一次的结果优化上述功能了一下，我留给你。总而言之，它看起来像这样：

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

Answer 2

问题是，你需要等待图像查询像width或height属性之前加载。

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

而且你正在做一个循环设置两个变量，然后，外循环的，你要指定所有图像非常相同的变量的值。

你需要做的第二循环中的查询来代替。

JavaScript的获得表中的所有图像的自然宽度/高度

问题描述投票：1回答：2

2个回答

最新问题

JavaScript的获得表中的所有图像的自然宽度/高度

问题描述 投票：1回答：2

2个回答

最新问题

问题描述投票：1回答：2