naturalHeight 和 naturalWidth Javascript 的問題

Question

我嘗試按橫向/縱向格式對圖像進行排序，因此我首先使用 selectFunction() 選擇頁面上的所有圖像，然后使用觸發進一步操作的函數“hochquer”對它們進行排序。

我的問題：一個圖像在 console.log() 中顯示的寬度和高度為 0，即使它在我的頁面上正確顯示並且具有實際的寬度和高度。 如果我第二次重新加載頁面，它工作得很好，我會得到這個圖像的寬度和高度。

誰能幫我這個？

//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();
  }

更新：

控制台截圖：[1]： https : //i.stack.imgur.com/Jr6P8.png
我使用的更多代碼，我認為解決了@54ka 提到的問題

  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

編輯：在執行之前的代碼后，我根據您在下面的評論進行了以下更改。

我現在將事件偵聽器添加到 imgLoadCallback() 中的所有圖像，並創建了一個包含來自 hochquer() 函數代碼的回調函數。 請嘗試運行此代碼。

    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();
}

從編輯前：

就像@54ka 在評論中提到的那樣，圖像可能不會立即加載，通常在 WEB API 環境中會在執行時異步加載圖像，例如從 src 加載圖像等，以免阻塞主執行線程。 您的代碼的其余部分是同步的，包括您為了將寬度和高度記錄到控制台而執行的 console.log()s，因此一旦到達該特定代碼行，這些就會立即發生。

因此，我在下面的代碼中所做的基本上是為每個圖像標簽添加一個事件處理程序，只有當圖像完成“加載”時，才會執行處理程序中的以下代碼（這是我們打印寬度的地方和高度來安慰現在）。 現在，我添加的這個回調函數只會在圖像加載后執行。 因此，有了這個，它很可能會向控制台打印正確的寬度和高度。 但我不能確定，直到我們在你的最后運行它，因為你在最后調用回調。

Answer 2

這是關於圖片加載的延遲，我通過使用 @54ka 提供的鏈接中的onload事件和代碼，用一種新方法修復了它。

@54ka 的評論：

原因是當您第一次加載時，您從尚未加載的圖片中獲取尺寸。 在刷新瀏覽器中，它將它放下並設法在腳本通過之前顯示它。 要解決此問題，請添加“onload 事件”，例如： <body onload="myFunction()">或嘗試此鏈接： Javascript - 在所有圖像加載后執行

naturalHeight 和 naturalWidth Javascript 的問題

問題描述

2 個解決方案

解決方案1
0 已采納 2020-11-10 14:52:58

解決方案2
0 2020-11-13 14:18:52

naturalHeight 和 naturalWidth Javascript 的問題

問題描述

2 個解決方案

解決方案1 0 已采納 2020-11-10 14:52:58

解決方案2 0 2020-11-13 14:18:52

解決方案1
0 已采納 2020-11-10 14:52:58

解決方案2
0 2020-11-13 14:18:52