个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
我正在尝试从 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>预期:
最佳答案
好的，你的问题有很多部分，我开始做最简单的事情，记录解析的 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，返回一个节点列表。一旦检测到所有 _loaded 属性，加载的函数将触发您的 Jquery 事物。 Array.prototype.slice.call 是将 HTML Collection 或 NodeList 转换为常规数组的老派方法，很酷的 children Array.from 如今，这取决于你。您还可以通过存储一次 Array.prototype.slice.call... 的结果来稍微优化上述函数，我将其留给您。总而言之，它看起来像这样:
关于javascript获取表格中所有图像的自然宽度/高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54562129/
28
4
0
我有一套使用两种语言的文档:英语和德语。关于这些文档没有可用的元信息，程序只能查看其内容。基于此，程序必须决定用哪种语言编写文档。 是否有可以在几个小时内实现的针对该问题的“标准”算法？或者，一个免费
背景 我有一个日志系统，可以将记录输出到 std::ostream .每条记录都用一个计数器进行注释，该计数器随着每个输出而增加 1，如下所示: ===== Batch # 5 ===== T
用户可能希望根据需要分隔数字。 从字符串中提取所有(自然)数字的最有效(或简单的标准函数)是什么？ 最佳答案 您可以使用正则表达式。我从 Sun's regex matcher tutorial 修改
我认为如果表有代理键而没有(自然)替代键是没有意义的(请记住，代理键的属性之一是它在数据库之外没有意义环境)。 例如假设我有下表: 假设 employee_id 是代理主键，表中没有(自然)备用键。
我想将屏幕方向锁定为其默认方向。我在实现这一点时遇到问题。最初我将屏幕锁定为 list 中的肖像。它适用于纵向默认设备。但是许多平板电脑默认为横向，因此在这些设备中锁定纵向是不合适的，我想检测此默认方
我已将笔记本电脑上的触摸板滚动设置为倒置(自然)。它适用于任何地方(pdf、浏览器等)，但在 vscode 中，它坚持正常滚动。通过 vscode 的设置文件没有显示适当的条目。 系统:Ubuntu
在我发现的许多在上限集合上使用可尾游标的示例中，代码包括: hint( { $natural: 1 } ) (例如 here )，包括官方文档 ( here )，以“确保我们不使用任何索引”，并且结果
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: T
一些上下文:Node.js、Bot、natural module . 我想构建一个机器人，并且我正在使用自然模块来解析用户输入并对其进行总体分类。 var classifier = new natur
我是一名优秀的程序员,十分优秀！