代码之家 › 专栏 › 技术社区 › Dmitry Kuzminov

添加图像时,<img/>元素会触发哪些事件?

events image html javascript

Dmitry Kuzminov · 技术社区 · 4 年前

我在有图像的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 手柄。

我的问题是如何避免触发 一个错误 事件和呼叫 loadImage 通过更合适的事件。我正在寻找每个人的活动 img .

更新: 不要认为这是一个容易的问题。图像已添加动态从C++代码转换为QWebView。我无法使用任何URL访问实际的图像,但我将它们作为字节数组从数据库中检索(也从C++代码中检索)。我正在从JS函数访问C++代码 loadImage 我无法使用 window.onload 因为图像是在主页已经加载的随机时刻添加的。

1 回复 | 直到 4 年前

sonEtLumiere 4 年前

您可以将图像文件存储到数组(列表)中。这段代码只是一个示例,它将每两秒钟更改一次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;

<a id="imgLink" href=""><img id="image"></a>

cam 4 年前

加载占位符图像,然后挂入 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"/>

cam 4 年前

您提到图像src是c++代码可以访问的字节数组,您可以直接在img中使用字节数组 src 如下:

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前