Question

<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文件中，除了imgT以外，display:block;没有任何内容。

因此，在这种情况下，js将0显示为imgT宽度，即看不到它。

当我将js代码放在一个单独的.js文件中时，一切正常，除了在页面加载结束时重新调整大小的丑陋图像。

我希望在加载后避免这个额外的重新排列页面，即在加载图像后重新调整大小，但是javascript没有正确地看到它的宽度。

任何帮助？

Answer 1

您的代码在创建图像元素后运行，但是内部图像的加载是异步的。您需要等到<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>子句

Answer 2

如果你不想重新排列，你必须使用php获取宽度并插入它。所以：
$sizes = getimagesize($folder . "/01.jpg"); width = sizes[0];
你还必须用php计算高度。

加载后如何避免额外重新安排页面？

2 个答案: