Обнаружение новых изображений, загружаемых в DOM, обработчик событий загрузки jQuery не срабатывает

$('img').on('load',... не будет работать, потому что он рассылает анонимные обработчики событий на все образы существующий. Они никогда не привязываются к будущим, AJAX / динамически вставленным изображениям.

Правильная форма было бы будет: $('body').on ('load', 'img', handleImgTag);, КРОМЕСобытия load не всплывают.

Итак, вы должны использовать либо: методы (в основном MutationObserver) из связанного вопроса, либо что-то вроде waitForKeyElements().
И вы должны прикрепить событие загрузки динамически (для медленной загрузки изображений).

Следующий полный рабочий сценарий иллюстрирует процесс. Обратите внимание, что waitForKeyElements срабатывает один раз для каждого <img>, независимо от того, загружен он статически или динамически. :

// ==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.info ("Found new image with width ", newImg.width () );
}

Примечание: рекомендуется настроить селектор jQuery, переданный в waitForKeyElements, чтобы максимально сузить целевые изображения.

В области браузера лучше всего использовать globalEventHandler или eventListeners.

Но поскольку у пользовательских скриптов есть несколько разных областей действия для window и document, он не работает как есть. Эта проблема с областью видимости такая же, как и при использовании веб-расширения (следующее поколение пользователей ...), но, по крайней мере, она заставляет нас много заботиться о DOM.

Вот несколько обходных путей для пользовательских скриптов после собственных экспериментов. Обычно мои эксперименты приводят к отрицательным голосам нелюбопытных «программистов», так что не беспокойтесь и получайте удовольствие!

Сначала вместо событий загрузки внутри пользовательского скрипта загружаются скрипты с задержкой. Это грязно, но очень помогает, по крайней мере, для отладки.

setTimeout(function(){    }, 3000)

Чтобы загрузить обработчики событий в основной документ, нам нужно создать элемент и добавить его в основную DOM.

В большинстве случаев проблемы возникают только потому, что браузеры загружают локальные ресурсы намного быстрее, мы должны указать, где сценарий должен быть на целевой странице, или он может быть расположен в самом верху DOM. (Это означает отсутствие обработчика событий, мы не можем вызывать id по их имени, нам нужно будет использовать getElementById и т. д. И т. Д.)

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

Хороший момент здесь то, что скрипт может быть внешним. Загружая внешние скрипты, браузеры позаботятся о том, чтобы добавить его в DOM, фактически, если DOM хорошо загружен. в большинстве случаев вещи начинают работать именно с этого действия.

Другой альтернативой является прямая установка атрибута onchange для каждого элемента целевой DOM.

Это действительно, если элементы уже существуют. (Если вы загружаете изображения, изменяя src). Вы также можете установить многие (скрытые) элементы по мере необходимости и установить их атрибуты. Это немного избыточно, но избегайте прослушивателей событий. Это плоский подход. Это тоже можно сделать на стороне сервера.

Чтобы установить onchange для всех тегов изображений, не зная их идентификаторов, мы можем использовать querySelectorAll, что в данном случае очень полезно, потому что мы можем использовать на нем forEach. (В отличие от getElementsBytagName)

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

Теперь все вместе:

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>

Область видимости - ключ к созданию хороших пользовательских скриптов.

Попробуйте поместить весь свой скрипт в конец DOM. Удачи!