<body>
<img id='imgT' src='<?php echo $folder;?>/01.jpg' alt="img">
<script>
$("#imgT").css("height" , 90 + "vh"); // I need to avoid scrolling to see the entire image.
var a = $("#imgT").width() + 3;
alert (a); // result is 3 instead of real width
$("#container").css("width", a);
</script>
...
</body>
在 css 文件中，除了 display:block; 之外，没有任何关于 imgT 的内容。
因此，在这种情况下，js 将 0 显示为 imgT 宽度，即看不到它。
当我将 js 代码放入单独的 .js 文件中时，一切正常，除了在页面加载结束时重新调整丑陋的图像大小之外。
我想在加载页面后避免这种额外的重新排列页面，即在加载图像后立即重新调整大小，但 javascript 无法正确看到其宽度。
有什么帮助吗？
最佳答案
您的代码在创建图像元素后运行，但是内部图像的加载是异步的。您需要等到 <img> 内的图像完全加载后，JavaScript 才会报告正确的测量结果:
<script>
$(window).load(function() {
$("#imgT").css("height", 90 + "vh"); // I need to avoid scrolling to see the entire image.
var a = $("#imgT").width() + 3;
alert(a); // result is 3 instead of real width
$("#container").css("width", a);
});
</script>
$(window).load(function() {仅在所有异步元素(如 <iframe>)之后执行子句和<img>正在满载中
关于jquery - 加载后如何避免额外的重新排列页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24760154/