添加图片时 <img/> 元素会触发哪些事件？答案

【问题标题】：What are the events that the <img/> element triggers when the image is added?添加图片时 <img/> 元素会触发哪些事件？
【发布时间】：2020-07-31 13:16:50
【问题描述】：

我正在向有图像的 HTML 动态添加内容。按照设计，我不知道添加内容时的实际图像数据，但我正在使用 JS 检索这些数据。我需要一个触发检索此内容的函数的事件。到目前为止，我已经使用 hack 实现了这一点：

<img src="_" onerror="loadImage(this)" data-id="1"/>
<img src="_" onerror="loadImage(this)" data-id="2"/>
<img src="_" onerror="loadImage(this)" data-id="3"/>

每张图片都无法加载src="_"属性并触发onerror句柄。

我的问题是如何避免触发onerror 事件并通过更合适的事件调用loadImage。我正在寻找每个人的事件img。

更新：不要认为这是一个简单的问题。图片是从 C++ 代码动态添加到 QWebView 中的。没有可以使用任何 URL 访问的实际图像，但我将它们作为字节数组从数据库中检索（也来自 C++ 代码）。我正在从 JS 函数 loadImage 访问 C++ 代码。我不能使用window.onload，因为图像是在主页已经加载时随机添加的。

【问题讨论】：

请查看stackoverflow.com/questions/263359/…
那个链接没有回答我的问题。
为什么需要活动？负责将这些元素添加到 DOM 的代码当然也可以同时执行loadImage。询问了解 QWebView 的人如何做到这一点，而不是搜索 hack。
有一种方法可以检测添加到 DOM 中的内容，称为MutationObserver。
不，从 HTML 处理它绝对是 hack。如果您可以控制插入的内容，那么您也应该对插入做出反应，不要要求无关的事情为您做。

标签： javascript html image events

【解决方案1】：

您可以将图像文件存储到数组（列表）中。此代码只是一个示例，它将每两秒更改一次 image.src，您可以根据需要使用函数来处理。

var list = [
  "image1.jpg",
  "image2.jpg",
  "image3.jpg",
];

var i = 0;
function changeImgs() {
  i++;
  i == list.length ? i = 0 : 0;
  var image = document.getElementById('image');
  image.src = list[i];
  document.getElementById('imgLink').href = list[i];
}

setInterval(function() {
  changeImgs()
}, 2000);

window.onload = changeImgs;

&lt;a id="imgLink" href=""&gt;&lt;img id="image"&gt;&lt;/a&gt;

【讨论】：

每张图片我都需要一个单独的事件。我认为setInterval 比onerror 更脏。
需要通过id获取每个图片元素，然后应用一个函数
接下来，我无法使用窗口的onload 事件，因为我正在动态添加内容。
图片也有load、loadstart、loadend之类的事件，而你正在将src添加到_，所以它肯定会给你一个错误。
相反，您可以放置一些虚拟图像，例如This image is loading，或gif 的动画类型，当javascript 加载图像时，您可以替换图像的src

【解决方案2】：

加载一个占位符图像，然后挂钩到onload 事件。

<img src="placeholder.jpg" onload="loadImage(this)" data-id="1"/>
<img src="placeholder.jpg" onload="loadImage(this)" data-id="2"/>
<img src="placeholder.jpg" onload="loadImage(this)" data-id="3"/>

【讨论】：

使用占位符并不比触发错误更好（甚至更糟）。第二种方法根本没有回答我的问题，因为我问的是如何触发函数。
占位符图像通常用于延迟加载目的，并且在图像的实际来源尚未准备好时才有意义。听起来 C++ 代码正在将图像元素插入页面但不知道 src 应该是什么，这是正确的吗？在这种情况下，占位符图像 + onload 是有意义的。
根本没有 URL。我将图像存储在数据库中并检索实际的字节数据，因此src 属性是无用的。或多或少延迟加载是我使用onerror 事件实现的，但就我而言，我不必将占位符存储为文件。由于 WebKit 是同步的，所以甚至不需要占位符。

【解决方案3】：

你提到图片src是c++代码可以访问的字节数组，可以直接在imgsrc中使用字节数组，如下：

<img src="data:image/jpg;base64, [byte array]">

【讨论】：

这是一个很好的建议，但让我们考虑一下，我希望将添加图像和检索字节数组分开到不同的模块中。 PS我想知道谁以及为什么不赞成您的回答...