Javascript 调整图像大小以填充div

我有下面的函数来调整图像大小，以填充其容器div，而不会使图像倾斜。它使用css按高度填充，如果图像不够宽，无法填充div，则该函数使用宽度填充div，并将高度设置为自动。问题是代码只适用于window.load，因此如果用户正在注意，他们可以看到图像加载，然后在一秒钟后它会发生变化。那么，我将如何更改该函数以使用document.ready

function imageResize() {
  $(".square").each(function(){
    if($("img",this).width() < $(this).width()){
        $("img",this).css("height", "auto");
        $("img",this).css("width", "100%");
    }
  });
}

函数imageResize（）{
$（“.square”）。每个（函数（）{
如果（$（“img”，this）.width（）<$（this）.width（））{
$（“img”，this）.css（“高度”，“自动”）；
$（“img”，this）.css（“宽度”，“100%”）；
}
});
}

---

编辑：当前函数使用document.ready的问题是，如果图像太大，则在加载图像之前文档已“就绪”。所以我想解决这个问题的办法是在图像加载到页面之前，从文件中获取实际图像的长度和宽度

调用就绪处理程序中的函数：

$(document).ready(function(){
  imageResize();
});

如果要在调整大小时使用它，请调用调整大小时的函数：

$(window).resize(function(){
  imageResize();
});

使用加载处理程序中的代码来获取图像维度，该维度工作正常：

$(window).load(function(){
  imageResize();
});

---

我知道应该把它放在document.ready函数中，但问题是，当文档准备好时，图像没有加载，所以这不起作用。我想我需要做一些事情来获取实际的图像尺寸。这通常是可行的，但是如果文件很大，那么仍然会有延迟，因此用户可以看到100%高度的图像加载，然后在大约一秒钟后图像会发生变化。要解决此问题，请首先使用css隐藏图像，并在加载函数中显示它们，然后使用imageResize（） ....