Détecter le chargement des images avec ou sans jQuery

Oui, c'est un grand classique, la base du JavaScript pour débutants. Mais, parfois, avec la fatigue, il m'arrive de mélanger mes souvenirs de jQuery avec le JavaScript pur jus (Vanilla JavaScript, comme on dit en anglais). Pour éviter ça, je le note ici.

Avec du JavaScript pur jus

document.addEventListener('DOMContentLoaded', function() {
  const images = document.querySelectorAll('#truc .bidule img');

  for (let i = 0; i < images.length; i++) {
    const img = images[i];

    if (img.complete) {
      console.log(img, 'déjà chargée')
    } else {
      img.addEventListener('load', function () {
        console.log(img, 'fin de chargement')
      })
      img.addEventListener('error', function() {
        console.log(img, 'erreur de chargement')
      })
    }
  }
})

exemple

Avec jQuery

$(document).ready(function() {
  let images = $('#truc .bidule img');

  images.each(function() {
    if (this.complete) {
      console.log(this, 'déjà chargée')
    } else {
      $(this)
        .load(function() {
          console.log(this, 'fin de chargement');
        })
        .error(function() {
          console.log(this, 'erreur de chargement');
        })
    }
  })
})

exemple