I have made a popup whenever the image was not loaded but the problem scenario was, I am getting my popup even the image is loaded for the first time. So, I need to refresh it for disappearing it. How can I resolve it?

enter image description here

The problem is that I have included the condition to check the image is loaded or not after the code of popup .so for the first time the popup was appearing even it satisfies the condition.

Help me out of it.

CodePudding user response：

You should edit your question so as to include your code, so your problem is reproducible.

You can store your image as a variable and pass a function that hides your pop-up once the image is loaded.

var img1 = document.createElement("img");
    
    img1.onload = function() {
        document.getElementById("**popup_ID").style.display='none'; 
    };
img1.src = "**your_image_path**"; //Edit suggested by @vanowm

Change "your_image_path" and "popup_ID" to match your code.

CodePudding user response：

Image has complete property that would tell if it finished loading or not. You can use that to show/hide popup on startup. However to detect if image was successfully loaded or error occur, you'd need setup event listeners.

Here is a little example that does that:

let timer;
const elLoadGood = document.getElementById("loadGood"),
      elLoadBad = document.getElementById("loadBad"),
      elPopup = document.getElementById("popup"),
      elImg = document.getElementById("myimage"),
      imgSrc = "https://cdn.spacetelescope.org/archives/images/publicationjpg/heic1502a.jpg?";

//set event handlers
elImg.onload = imageOnLoad;
elImg.onerror = imageOnError;

//load image
imageLoad(imgSrc);

elLoadGood.addEventListener("click", e=>
{
  //hide image
  elImg.removeAttribute("src");
  //load image
  imageLoad(imgSrc   Date());
});

elLoadBad.addEventListener("click", e=>
{
  //hide image
  elImg.removeAttribute("src");
  //load image
  imageLoad(Date());
});


function imageLoad(src)
{
  elPopup.classList.add("loading");
  elImg.classList.remove("error");
  elPopup.firstChild.textContent = "loading... please wait";
  //show popup
  imageFinished({});
  //load image
  elImg.src = src;
}

function imageFinished(img)
{
  //check if image finished loading
  if (img.complete)
  {
    elPopup.firstChild.textContent = "Finished loading. Close popup in 2 seconds";
    elPopup.classList.remove("loading");
  }
  clearTimeout(timer);
  //hide popup
  timer = setTimeout(() => elPopup.classList.toggle("hidden", !!img.complete), ~~img.complete * 2000);
}

function imageOnLoad(e)
{
  e.target.classList.remove("error");
  imageFinished(e.target);
}

function imageOnError(e)
{
  e.target.classList.add("error");
  imageFinished(e.target);
}

div.img
{
  position: absolute;
  left: 0;
  top: 0;
  line-height: 100vh;
  text-align: center;
  width: 100%;
  z-index: -2;
}
img
{
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}

img.error
{
  animation: error infinite 1s ease-in-out alternate;
  padding: 1em;
  border-radius: 100%;
}

#popup
{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 100vh;
  text-align: center;
  z-index: -1;
  background-color: transparent;
  opacity: 1;
  transition: background-color 1s, opacity .5s;
}
#popup>span
{
  background-color: #ffffff7f;
  color: black;
  border: 1px solid;
  padding: 1em;
}
#popup.loading
{
  background-color: #0000007f;
}
#popup:not(.hidden) ~ *
{
  filter: blur(5px);
}

#popup.loading ~ *
{
  filter: blur(10px);
}
#popup.loading>span::before
{
  content: "