What are the events that the <img/> element triggers when the

image is added?
Asked 3 years, 9 months ago Modified 3 years, 9 months ago Viewed 8k times

I'm dynamically adding content to HTML where there are images. By design I don't know the actual
image data on the time of adding the content, but I'm retrieving this data using JS. I need an event that
1 triggers the function that retrieves this content. So far I've implemented this using a 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"/>

Each image fails to load src="_" attribute and triggers the onerror handle.
My question is how to avoid triggering the onerror event and call the loadImage by a more appropriate
event. I'm looking for an event of each individual img .
Update: don't consider that as an easy question. The images are added dynamically from C++ code
into QWebView. There are no actual images that I can access using any URL, but I'm retrieving them as
byte arrays from the database (from C++ code as well). I'm accessing the C++ code from the JS function
loadImage . I cannot use the window.onload cause the image is added at random moments of time when
the main page is already loaded.
javascript html image events

Share Follow edited Jul 31, 2020 at 5:08 asked Jul 31, 2020 at 4:12
Dmitry Kuzminov
6,363 7 20 43

Please check this stackoverflow.com/questions/263359/… – Asutosh Jul 31, 2020 at 4:19

That link doesn't answer my question. – Dmitry Kuzminov Jul 31, 2020 at 4:25
Why would you need an event? The code responsible of adding these elements to the DOM certainly can also
execute loadImage at the same time. Ask the ones that know about QWebView how to do this rather than
searching for hacks. – Kaiido Jul 31, 2020 at 5:13
1 There is a way to detect additions to the DOM, it's called a MutationObserver . – Touffy Jul 31, 2020 at 5:18
1 No, handling it from HTML is definitely the hack. If you have control over what's doing the insertion, that's where
you should react to that insertion too, don't ask something unrelated to do it for you. – Kaiido Jul 31, 2020 at 5:20

3 Answers Sorted by: Highest score (default)

¿No encuentras la respuesta? Pregunta en Stack Overflow en español.
 You can store your image files into an array (list). This code is just an example, this will change the
image.src each two seconds, you can handle this with a function as you want.
0
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;

Run code snippet Expand snippet

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

Run code snippet Expand snippet

Share Follow answered Jul 31, 2020 at 4:20

sonEtLumiere
4,516 3 11 40
I need an individual event one per each image. I consider setInterval as even dirtier hack than the one with
onerror . – Dmitry Kuzminov Jul 31, 2020 at 4:23

you need to get each image element by id, and then apply a function – sonEtLumiere Jul 31, 2020 at 4:24
Next, I cannot use the onload event of the window as I'm adding the content dynamically. – Dmitry Kuzminov
Jul 31, 2020 at 4:26
Image has also events such as load , loadstart , loadend , and you are adding the src to _ so definitely it
will give you an error. – Yanjan. Kaf. Jul 31, 2020 at 4:32
Instead you can put some dummy image like This image is loading , or a animation kind of gif and when the
javascript wil load the image you can replace the src of the image – Yanjan. Kaf. Jul 31, 2020 at 4:34

Load a placeholder image and then hook into the onload event.
 <img src="placeholder.jpg" onload="loadImage(this)" data-id="1"/>
<img src="placeholder.jpg" onload="loadImage(this)" data-id="2"/>

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

Share Follow edited Jul 31, 2020 at 5:12 answered Jul 31, 2020 at 4:51
cam
3,316 1 12 16

Using placeholder is not better (or even worse) than triggering an error. The second method doesn't answer my
question at all, because I'm asking how to trigger the function. – Dmitry Kuzminov Jul 31, 2020 at 5:01
Placeholder images are common for lazy-loading purposes and make sense when the actual source of the image
isn't ready yet. It sounds like the C++ code is inserting the image element into the page but doesnt know what the
src should be, is this correct? In this case then a placeholder image + onload makes sense. – cam Jul 31,
2020 at 5:11
There are no URLs at all. I store images in the database and retrieve the actual byte data, so the src attribute is
useless. More or les the lazy loading is what I've implemented using onerror event, but in my case I don't have
to store a placeholder as a file. Due to the fact that WebKit is synchronous, the placeholder is even not needed.
– Dmitry Kuzminov Jul 31, 2020 at 5:15

You mentioned that the image src is a byte array that the c++ code has access to, you can use a byte
array directly in the img src as follows:
0 <img src="data:image/jpg;base64, [byte array]">

Share Follow answered Jul 31, 2020 at 5:16

cam
3,316 1 12 16
That is a good advice, but let's consider that I wish to separate adding the image and retrieving the byte array into
different modules. PS I wonder who and why downvoted your answer... – Dmitry Kuzminov Jul 31, 2020 at 5:21