加载完成后获取 div 或图像的宽度和高度
[英]Getting the width and height of a div or image after it finished loading
问题描述
我正在创建一个图片库，我需要知道包含图片的 div 的大小或加载后的图片本身。 我怎么能得到那个？ 我已经尝试了所有方法，但它在加载之前给了我 DIV 的大小，即 1px X 1px。
基本上所有东西都是隐藏的，你点击一个链接，图像就会显示出来，所以 div 从 1px x 1px 变为例如 419px x 1000px。 加载 DIV 或图像后如何获得最终大小？ 大小可以根据使用的设备和加载的图像而改变。 有没有办法只使用 JavaScript 来获取这些信息？
这是 function。 如果可能的话，我想在图像加载到同一个 function 后获取图像或 DIV 的高度。
这是我正在测试的 function
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`;
}
谢谢！
5 个解决方案
解决方案1
0 2021-03-08 15:47:56
尝试使用此 DOM 事件侦听器，在回调 function 中，您可以编写必要的代码来获取我认为的值： 这里
解决方案2
0 2021-03-08 15:54:02
就像“加载”事件适用于身体一样，它适用于图像。 所以你可以在图像上附加一个“加载”事件，当它触发时，测量宽度/高度。
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'
解决方案3
0 2021-03-08 15:58:00
你有没有尝试过：
<script>
var myImg = document.getElementById('image');
var realWidth = myImg.naturalWidth;
var realHeight = myImg.naturalHeight;
console.log(realWidth);
</script>
解决方案4
0 2021-03-08 16:14:10
解决方案1：
在您的 JS 文件中使用此解决方案JavaScript：
window.onload = () => {};//enter the code that gets the image or divs width and height in the {} brackets`
window.onload function 等待 DOM 加载完毕，然后执行 function。 它主要用于需要从预定义和 static 元素中获取默认值的情况。 进一步阅读： https://www.w3schools.com/jsref/event_onload.asp
解决方案2：
注意：仅当您使用“脚本”标签来使用 HTML 中的 JS 代码时才使用此选项。 使用 HTML 文档末尾的脚本标签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>
解决方案5
0 2021-03-09 00:47:07
谢谢大家，我感谢所有的帮助。 尽管我有一些好主意，但我终于找到了一个可行的答案。 答案是预先加载图像，当我这样做时，它给了我下一步所需的图像高度。 再次非常感谢。 我很感激。 我用于此的代码如下。 预加载图像后，我可以获得图像的宽度/高度，以便它们按计划在图库中工作。 它就像一个魅力。
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"
)
加载完成之前将div设置为不可见后，图像的宽度和高度为0
[英]Image Width and Height is 0 after setting div unvisible before load has finished
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.