【问题标题】：Getting the width and height of a div or image after it finished loading加载完成后获取 div 或图像的宽度和高度
【发布时间】：2021-06-06 12:10:12
【问题描述】：

我正在创建一个图片库，我需要知道包含图片的 div 的大小或加载后的图片本身。我怎么能得到那个？我已经尝试了所有方法，但它在加载之前给了我 DIV 的大小，即 1px X 1px。

基本上所有内容都是隐藏的，您单击一个链接并显示图像，因此 div 从 1 像素 x 1 像素变为例如 419 像素 x 1000 像素。加载 DIV 或图像后如何获得最终大小？大小可以根据使用的设备和加载的图像而改变。有没有办法只使用 JavaScript 来获取这些信息？

这是函数。如果可能的话，我想在同一函数中加载图像后获取图像的高度或 DIV。

这是我正在测试的功能

function ShowArt(nam,imgs,)
 { 
     
 var currentPosition = parseInt(movingDivObj.style.top);
 var scrollPos = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop; 
 

   movingDivObj.style.top = currentPosition + scrollPos + "px";
   
   
   movingDivObj.style.display = "block";
   document.getElementById("close").style.display = "block";
   document.getElementById("selectedart").style.display = "block";
   document.getElementById("artname").style.display = "block";
   document.getElementById("background").style.display = "block";
   
   display.src = imgs;
   
   document.getElementById("artname").textContent= nam;
   
   scrollPosition  = window.pageYOffset;
   document.body.style.position = "fixed";
   document.body.style.top = `-${scrollPosition}px`;

 }

谢谢！

【问题讨论】：

你有示例代码吗？您尝试过什么来解决这些问题？
我不确定如何获得它。我尝试过的一些代码与其他代码冲突，甚至无法加载图像。但是我尝试了一些简单的方法，例如 var test4 = document.getElementById("myimg").offsetHeight;警报（测试4）；这给了我 DIV 框的起始高度。我需要知道加载图像后的高度。

标签： javascript html image height width

【解决方案1】：

谢谢大家，感谢所有的帮助。尽管我有一些好主意，但我终于找到了一个可行的答案。答案是预先加载图像，当我这样做时，它给了我下一步所需的图像高度。再次非常感谢！我很感激。我用于此的代码如下。预加载图像后，我可以获得图像的宽度/高度，以便它们按计划在图库中工作。它就像一个魅力。

var images = new Array()
function preload() {
    for (i = 0; i < preload.arguments.length; i++) {
        images[i] = new Image()
        images[i].src = preload.arguments[i]
                }
        }
    preload(
        "Photos/AloneInTheStorm.jpg",
        "Photos/deepinthought.jpg",
        "Photos/68degrees.jpg",
        "Photos/forgotten.jpg",
        "Photos/babylycan2.jpg",
        "Photos/americancoot.jpg"
        )

【讨论】：

【解决方案2】：

解决方案 1：

在您的 JS 文件中使用此解决方案

JavaScript：

window.onload = () => {};//enter the code that gets the image or divs width and height in the {} brackets`

window.onload 函数等待 DOM 加载完毕，然后执行一个函数。当您需要从预定义的静态元素中获取默认值时，主要使用它。进一步阅读：https://www.w3schools.com/jsref/event_onload.asp

解决方案 2：

注意：仅当您使用“脚本”标签在 HTML 中使用 JS 代码时才使用此选项。在 HTML 文档的末尾使用 script 标签

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!--Your code goes here-->
  <script src="myScript.js"></script>
</body>
</html>

【讨论】：

【解决方案3】：

你试过了吗：

  <script>
    var myImg = document.getElementById('image');
            var realWidth = myImg.naturalWidth;
            var realHeight = myImg.naturalHeight;
    console.log(realWidth);
    </script>

【讨论】：

我需要知道宽度/高度，以便我可以在同一代码中使用该信息将其置于页面中心。这可能吗？基本上我需要获取宽度/高度，然后在同一函数中使用相同的信息来设置顶部和侧面位置（如果可能）。
你的意思是页面 0r 是图像吗，因为如果你想要页面大小： var win = window, doc = document, docElem = doc.documentElement, body = doc.getElementsByTagName('body' )[0], x = win.innerWidth || docElem.clientWidth || body.clientWidth, y = win.innerHeight|| docElem.clientHeight|| body.clientHeight;警报(x + ' × ' + y);
图像，基本上我有一个类似函数 MyImg(name, img) 的函数，它传递艺术作品的名称和 img src。在该功能中，它设置显示并使一切可见。在同一个函数中，我想在加载后获取 div 或图像的高度。现在它在完全加载图像之前给了我 div 或图像的高度。

【解决方案4】：

与“加载”事件适用于正文的方式相同，它适用于图像。所以你可以在图像上附加一个“加载”事件，当它触发时，测量宽度/高度。

const img = document.querySelector('#img')
img.addEventListener('load', (event) => {
  console.log('width', event.target.width)
  console.log('height', event.target.height)
})

img.src = 'https://via.placeholder.com/900x1000'

【讨论】：

我需要知道宽度/高度，以便我可以在同一代码中使用该信息将其置于页面中心。这可能吗？基本上我需要获取宽度/高度，然后在同一函数中使用相同的信息来设置顶部和侧面位置（如果可能）。

【解决方案5】：

尝试使用这个 DOM 事件监听器，在回调函数中你可以编写必要的代码来获取我认为的值：here

【讨论】：