How can I dynamically change the image src in JavaScript and only display it after it’s fully loaded using javascript load image logic?

General Discussions
2

Instead of modifying the existing img tag, create a new Image() object in JavaScript and attach the onload logic:

function loadNewImage(newSrc) {
  const loader = document.getElementById("loader");
  const displayImage = document.getElementById("id1");

  loader.style.display = "block";     // Show loader
  displayImage.style.display = "none";

  const img = new Image();
  img.onload = function () {
    displayImage.src = this.src;
    loader.style.display = "none";
    displayImage.style.display = "block";
  };
  img.src = newSrc;
}

This ensures the image only updates after it’s fully loaded.