naturalHeight 和 naturalWidth Javascript 的问题答案

【问题标题】：problem with naturalHeight and naturalWidth JavascriptnaturalHeight 和 naturalWidth Javascript 的问题
【发布时间】：2020-11-13 22:35:12
【问题描述】：

我尝试按横向/纵向格式对图像进行排序，为此我首先使用 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();

【问题讨论】：

你能告诉我们用户界面和控制台吗，比如截图？
原因是第一次加载的时候，从一张还没有加载的图片中取一个尺寸。在刷新浏览器中，它会将其放下并设法在脚本通过之前将其显示出来。要解决此问题，请添加“onload 事件”，例如：或尝试此链接：Javascript - execute after all images have loaded
感谢您的快速回复。我添加了一个屏幕截图并更新了代码 + 显示了一个新示例，我认为它已经解决了@54ka 提到的问题。
@链接完成_____
请看我的回答，这不是您问题的解决方案，但我需要您运行我回答中的代码，如果宽度和高度仍然显示不正确，请告诉我。跨度>

标签： javascript image

【解决方案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 在 cmets 中提到的那样，有可能图片不会立即加载，通常是加载图片之类的东西从 src 等异步发生在 WEB API 环境中，而 execution ，为了不阻塞主执行线程。其余代码是同步的，包括 console.log()s 您正在执行以将宽度和高度记录到控制台，所以这些几乎立即发生到达特定的代码行。

因此，我在下面的代码中所做的基本上是添加一个每个图像标签的事件处理程序，并且仅当图像具有完成“加载”处理程序内的以下代码将被执行（这是我们现在将宽度和高度打印到控制台的地方）。现在，我添加的这个回调函数只会在图像加载。所以，有了这个，它很可能会打印正确的控制台的宽度和高度。但在我们运行它之前我无法确定你结束了，因为你在最后调用了一个回调。

【讨论】：

我最后运行的回调对页面上的图像进行排序。我运行了您的事件侦听器，但调试器向我打印以下错误：“TypeError: selectFunction()[i].addEventListener is not a function”。在我的控制台中，我收到另一个错误：“未捕获（承诺中）TypeError：selectFunction()[i].addEventListener 不是函数”。控制台截图：[1]：i.stack.imgur.com/oToJh.png
你能尝试运行这个更新的代码吗？有关我所做更改的详细信息，请阅读我的回答中的“编辑：”部分。
非常感谢您的帮助。我尝试了编辑后的代码，但它并没有解决我的问题。仍然所有图像，但一个正在正确加载。还有其他可能导致这种行为的原因吗？
不抱歉，这是我可以从我可以看到的代码中得出的全部内容。但是，如果我有实际的源代码，我可能会提供更好的帮助。
其实这几乎是我所有的代码。唯一的区别是顶部定义了一些变量。而我发布的所有 js，但 select 函数都被包装到一个 main 函数中。我进行了更多故障排除，发现无法加载的一张图片是其中最大的一张- -。现在还有一个问题，我展示了一个在我最初的问题中创建图像的函数。我试图通过承诺来解决这个函数中延迟加载图像的问题。这段代码有效吗？它是否提供了它应该提供的功能？

【解决方案2】：

这是关于图片加载延迟的问题，我使用onload 事件和@54ka 提供的链接中的代码，用一种新方法修复了它。

@54ka 的评论：

原因是当你第一次加载时，你会从一张尚未加载的图片中获取一个尺寸。在刷新浏览器中，它会将其放下并设法在脚本通过之前将其显示出来。要解决此问题，请添加“onload 事件”，例如：<body onload="myFunction()"> 或尝试此链接：Javascript - execute after all images have loaded

【讨论】：