Detect new images being loaded into DOM, jQuery load event-handler does not fire

Question

I'm working on a userscript that does various things with images.

The problem is, sometimes images are added to the page AFTER the initial load, and these images are not processed by my userscript.

I need some code in javascript/jQuery which will automatically run a function every time a new image is loaded into the browser.

This is what I have tried:

$('img').on('load', function() {
    handleImgTag();
});

This does not work. When a new image is added to the page (I'm using chat.stackoverflow.com as a test, and sending a new message meaning my profile picture is added to the page again which is not processed by my code) the image is not processed and nothing happens to it.

I've tried searching around but I cannot seem to find a way to do this, perhaps because of bad search terms?

Is there an event or something that I can use in a Tampermonkey userscript which will run a function when a new image is added to the page the user is on?

EDIT:

I disagree with the duplicates mentioned because this is specifically about images, AND use inside a Tampermonkey userscript. Also, the duplicates are 5-8 years old and may not reflect best practices or current technologies.

Answer 1

$('img').on('load',... won't work because it spams anonymous event handlers onto all existing images. They never get attached to future, AJAX'd/Dynamically inserted images.

The correct form would be: $('body').on ('load', 'img', handleImgTag);, EXCEPT load events do not bubble.

So, you must use either: the techniques (mainly MutationObserver) from the linked question, or something like waitForKeyElements().
And, you must attach the load event dynamically (for slow loading images).

The following complete working script illustrates the process. Note that waitForKeyElements will fire once for each <img> whether it is loaded statically or dynamically. :

// ==UserScript==
// @name     _Process select images on or after load
// @match    *://chat.stackoverflow.com/rooms/*
// @match    *://chat.stackexchange.com/rooms/*
// @match    *://chat.meta.stackexchange.com/rooms/*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// @grant    GM.getValue
// ==/UserScript==
//- The @grant directives are needed to restore the proper sandbox.

waitForKeyElements ("#chat img", loadHandling);

function loadHandling (jNode) {
    if (jNode[0].complete) {
        handleImgTag (jNode);
    }
    else {
        jNode.on ('load', handleImgTag);
    }
}
function handleImgTag (jNodeOrEvent) {
    var newImg;  //  will be jQuery node
    if (jNodeOrEvent instanceof jQuery) {
        newImg = jNodeOrEvent;
    }
    else {
        newImg = $(jNodeOrEvent.target);
    }
    console.log ("Found new image with width ", newImg.width () );
}

---

Note: recommend tuning the jQuery selector, passed to waitForKeyElements, to narrow the target images as much as reasonable.

Answer 2

In a browser scope, a globalEventHandler or eventListeners would be the way to go.

But because userscripts have some differents scopes for window and document, it does not work as it is. This scoping problem is the same using web extensions (next gen userscipts..), but at least it force us to much take care of the DOM.

Here is some workarounds for userscripts, following own experiments. Usually my experiments leads to downvotes by incurious «programmers», so no worries and have fun!

First instead of load events, inside the usercript, loading scripts with a delay. It is dirty but help a lot, at least for debugging.

setTimeout(function(){    }, 3000)

To load event handlers into the main document, we got to create an element and append it to the main DOM.

In most cases, issues comes just because browsers loads local resources much faster, we must specify where the script should be on the target page, or it may be positioned at the very top of the DOM. (Meaning no event handler, we can't call id by their name, we would need to use getElementById, etc,etc)

s = document.createElement("script")
s.innerText = "" // The events scripts
document.body.appendChild(s)

The good point here, the script can be external. By loading external scripts, browsers will take care to append it to the DOM, actually if the DOM is well loaded. in most cases stuffs start to works with just this action.

An other alternative is to directly set a onchange attribute on each element of the target DOM.

This is valid, if the elements already exists. (If you are loading your images by changing the src). You can as well set many (hidden) element as need for later and set their attribute. This is a bit redundant, but avoid any event listeners. It is flat approach. It can be done server side too.

To set an onchange on all images tags, without knowing their id, we can use querySelectorAll, which is on this case very useful because we can use forEach on it. (Unlike getElementsBytagName)

document.querySelectorAll("img").forEach(function(element){
  element.setAttribute("onchange","handleImgTag()")
})

Now all together:

setTimeout(function(){
  // the querySelectorAll function encoded in base64
  var all = "ZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgnaW1nJykuZm9yRWFjaChmdW5jdGlvbihlbGVtZW50KXsNCiAgZWxlbWVudC5zZXRBdHRyaWJ1dGUoJ29ubG9hZCcsJ2FsZXJ0KCknKQ0KfSk=" 
  s = document.createElement("script")
  // The events scripts, base64 decoded
  s.innerText = atob(all) + "" 
  document.body.appendChild(s)  // End of DOM, at trigger.

}, 1000) // Onloads sets after 1s.

<img src="http://icons.iconarchive.com/icons/martin-berube/flat-animal/64/pony-icon.png"></img>

<img src="" id="more"></img>

<button onclick="more.src='http://icons.iconarchive.com/icons/martin-berube/flat-animal/64/crab-icon.png'">LOAD MORE</button>

Scoping is the key for good userscripts.

Try to put all your script at the DOM end. Good luck!