Animate native loading="lazy" images

animated-lazy-load.html

Source: https://medienbaecker.com/articles/animate-native-lazy-loading

<style>
@media (scripting: enabled) {
  [loading="lazy"] {
    opacity: 0;
    transition: opacity 0.5s;
  }
}
</style>

<img src="image.jpg" width="800" height="600" loading="lazy">

<script>
document.querySelectorAll('[loading="lazy"]').forEach(element => {
  const animateIn = () => {
    element.style.opacity = 1;
  };

  if (element.complete) {
    animateIn();
  } else {
    element.addEventListener('load', animateIn);
  }
});
</script>