Есть ли более простой способ назначить стиль незагруженным изображениям?

Question

[SagePtr]

Необходимо назначить для ещё не загруженных изображений отдельный стиль.
В данный момент при помощи JS назначаю отдельный класс, который удаляю при загрузке.

document.querySelectorAll("img").forEach(img => {
  if (!img.complete) {
    img.classList.add("incomplete");
    img.addEventListener("load", () => img.classList.remove("incomplete"));
  }
}

Но этот способ создаёт для каждого изображения отдельный обработчик, и требует для вновь созданных изображений отдельно проделать то же самое.
Есть ли более простой способ сделать это?

Answer 1

[Арсений Матыцин]

Тебе стоит копнуть в обсерверы типа такого и такого. Либо пойти по пути наименьшего сопротивления и заюзать bind в либе jQuery, который умеет ловить события на элементах, которые досоздаются после загрузки DOM. Но это неточно, я несколько лет, как не имел дело с jQuery.

Answer 2

[Игорь]

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

<img class="incomplete" src="..." />

document.querySelectorAll("img").forEach(img => {
    img.addEventListener("load", () => img.classList.remove("incomplete"));
}

Comments

[SagePtr]

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

[Игорь]

SagePtr, хмм, я и забыл об этом, мой косяк. Получается самый оптимальный вариант это

document.querySelectorAll("img").forEach(img => {
  // if убрал так как в нем нет смысла
  img.classList.add("incomplete");
  img.addEventListener("load", () => img.classList.remove("incomplete"));
}

[SagePtr]

loonny, без if как раз и остаётся вероятность, что присвоим уже загруженному изображению стиль и обработчик, и никогда его уже и не дождёмся

[Игорь]

SagePtr, Событие load не будет у изображения которое уже загружено, а значит обработчик будет повешен, просто он не будет выполнен. То есть я просто сократил код.

[Kovalsky]

Ну вы можете просто при выполнении скрипта смотреть загружена ли картинки или нет, и уже в зависимости от этого снимать/вешать класс или вешать обработчик. Каким образом конкретно вы будете устанавливать стили - по классу incomplete или наоборот complete это значения никакого толком не имеет, только изменит в мелочах логику обработки.

То есть отвечая на исходный ваш вопрос: нет, мне кажется не существует способа проще вешать стили на картинки в загруженном и не загруженном состоянии. Т.к. у вас нет способа сделать это с помощью css, то JS это единственный вариант, например так - img.complete && typeof img.naturalWidth != 'undefined' && img.naturalWidth != 0

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