jQuery/javaScript：何时获得正确的容器Div尺寸？

Question

jQuery/javaScript：何时获得正确的容器Div尺寸？

<div>
<div class="container">
    <div class="slider">
        <img src="image1.jpg">
        <img src="image2.jpg">
    </div>
<div>
</div>

|container----|
--------------Slider--------
|image1       |  image2    | 
-----------------------------

获得容器宽度并将图像宽度设置为容器宽度的合适时机是什么？

尝试的

   $(document).ready(function() {
      var width = $(".container").width();
      $("img").css("width", width + "px");
   });

宽度每次重新加载时的宽度都不同，例如524，1449，1920，

正确的值为524。

当调试代码时，请始终获得正确的值524。原因可能是容器div在调试模式下完全渲染（停在断点）。

Answer 1

很难说出为什么宽度会根据您的代码发生变化...因此我发布了3个解决方案。 编辑：阅读您的评论后，我相信解决方案2是您想要的。

解决方案1-使用大众

简单解决方案应将图像宽度设置为CSS中的100VW：这样：
#img {width = 100VW}

解决方案2-更新window.onload中

通常window.onload =（）=＆gt; {}会做。这就是为什么：

图像负载与DOM负载

看来，图像加载时间可能会影响您的容器大小。使用Ready时，代码在等待图像加载之前会启动。然后，您的代码在图像具有“真实”宽度之前运行。您应该使用$（window）.on（“加载”，处理程序）

使用jquery，您使用$（document）.ready（）在加载 dom 和和$（window）.on时执行某些内容（”加载”，处理程序）当也加载所有其他内容时，执行某件事，例如图像

完整paxdiablo的解释

解决方案3'hacky' - 调整事件侦听器

这是一种“ hack”解决方案，尽管以上所有内容都无法正常工作，它可能对您有效（就像我一样，这是一般的'不确定是什么原因导致代码的宽度变化）。假设您不希望容器尺寸始终不断变化，而只是在加载后才更改。您可以在有限的时间内收听更改，然后将其关闭：

const resize_ob = new ResizeObserver((entries) => {
    let rect= entries[0].contentRect;
    let width = rect.width;

    // here you can select all of its image children and adjust their size

});

let myDiv=window.getElementById("container")
resize_ob.observe(myDiv)

然后，您可以在一段时间后转动此事件侦听器，或者在用户以某种方式与您的页面进行交互时：

//end resize observation
resize_ob.unobserve(myDiv);

请参见详细的示例在这里。请注意，它是hacky的，并且AS cesare-polonara 提到：

可能会导致以这种方式使用怪异的行为，因为他不会听宽度的变化使编程性地