problem with naturalHeight and naturalWidth Javascript

Question

I try to sort Images by landscape/portrait format therefor I first select all images on the page with the selectFunction() then I sort them with the function "hochquer" which triggers further actions.

my Problem: One image shows up with a width and height of 0 in console.log() even though it is properly displayed on my page and has a actual width and height. If I reload the Page for a second time it works perfectly fine and I get a width and height for this Image.

can anyone help me with this?

//Screenshot of the console added
function selectFunction() {
  img = document.querySelectorAll(".img");
  let imgSelector = Array.from(img);

  if (imgSelector % 2 != 0) {
    imgSelector.push("even'er");
  }
  return imgSelector;
}

function hochquer(callback) {
    for (let i = 0; i < selectFunction().length; i++) {
      console.log(selectFunction()[i]);
      let Width = selectFunction()[i].naturalWidth;
      console.log(Width, "w");
      let Height = selectFunction()[i].naturalHeight;
      console.log(Height, "h");
      let Ratio = Width / Height;

      if (Ratio >= 1) {
        //quer
        querFormat.push(selectFunction()[i]);
      } else {
        querFormat.push(undefined);
      }
      if (Ratio < 1) {
        //hoch
        hochFormat.push(selectFunction()[i]);
      } else {
        hochFormat.push(undefined);
      }
    }
    callback();
  }

Update:

1. Screenshot of the console: [1]: https://i.stack.imgur.com/Jr6P8.png

2. some more code I use which I think addresses what @54ka mentioned

  function newImg() {
    let createImg = [];
    let imgSrc = [];
    const imgContainer = document.querySelector(".gallery");

    for (let i = 0; i < Gallery.length; i++) {
      createImg.push(new Image());
      imgSrc.push(Pfad + Gallery[i]);
      createImg[i].setAttribute("src", imgSrc[i]);
      createImg[i].setAttribute("class", "Img");
      imgContainer.appendChild(createImg[i]);

      function checkImage(path) {
        return new Promise((resolve) => {
          createImg[i].onload = () => resolve({ path, status: "ok" });
          createImg[i].onerror = () => resolve({ path, status: "error" });
        });
      }
      loadImg = function (...path) {
        return Promise.all(path.map(checkImage));
      };
    }

    loadImg(imgSrc).then(function (result) {
      console.log(result);
      hochquer(sort);
    });
  }
  newImg();

Answer 1

Edit: I have made the following changes basing on your comment below after executing previous code.

I'm now adding the event listeners to all images in imgLoadCallback( ) and created a callback function containing code from hochquer( ) function. Please try to run this code.

    const imgLoadCallback = function(){
  for (let i = 0; i < selectFunction().length; i++) {
    console.log(selectFunction()[i]);
    let Width = selectFunction()[i].naturalWidth;
    console.log(Width, 'w');
    let Height = selectFunction()[i].naturalHeight;
    console.log(Height, 'h');
    let Ratio = Width / Height;

    if (Ratio >= 1) {
      //quer
      querFormat.push(selectFunction()[i]);
    } else {
      querFormat.push(undefined);
    }
    if (Ratio < 1) {
      //hoch
      hochFormat.push(selectFunction()[i]);
    } else {
      hochFormat.push(undefined);
    }
  }
}

function selectFunction() {
  img = document.querySelectorAll(".img");
  img.forEach(i => i.addEventListener('load', imgLoadCallback))
  let imgSelector = Array.from(img);

  if (imgSelector % 2 != 0) {
    imgSelector.push("even'er");
  }
  return imgSelector;
}

function hochquer(callback) {
  imgLoadCallback();
  callback();
}

From before edit:

Like @54ka has mentioned in the comments, it is possible that the image does not load immediately, usually stuff like loading images from src etc happen in the WEB API Environment asynchronously while execution , in order to not block the primary execution thread. Remainder of your code is synchronous, including console.log( )s that you are performing in order to log the width and height to the console, so those happen pretty much immediately as soon as that particular line of code is reached.

Therefore, what I have done in the below code is basically add an event handler for each of the image tags and only when the image has completed 'load' the below code inside the handler will be executed (this is where we are printing the width and height to console now). Now, this callback function that I have added will only execute after image loads. So, with this, it will most likely print the correct width and height to console. But I cannot be sure until we run it at your end because you are calling a callback at the very end.

Answer 2

It was about a delay in the loading of the picture I fixed it with a new approach by using the onload event and code from the link @54ka provided.

comment of @54ka:

The reason is that when you first load, you take a size from a picture that has not yet been loaded. In the refresh browser, it lays it down and manages to show it before the script passes. To resolve this issue, add an "onload Event" such as: <body onload="myFunction()"> or try this link: Javascript - execute after all images have loaded