Javascript 如果图像已开始加载，则显示div

我相信，以下内容将等待图像完全加载：

$('.some-img').load(function(){
    $('.img-container').show();
});

然而，我想要的是等待图像开始加载，并根据图像的高度调整图像容器的高度

容器的高度是响应的

height:auto

，图像具有不同的高度，因此容器开始时没有高度（只有20px的填充），然后根据其内部图像的高度快速调整其高度，每次加载时都会出现光栅

---

是否有任何方法可以检查图像是否已开始加载，以便我可以调整图像容器的高度，然后执行

$（'.imagemodal container'）.show（）

，因为等待加载整个图像并不好。

使用

getImageSize

函数：

由于大于img包装宽度（600px）的图像被缩小以适应，我必须根据比率调整高度，并考虑20px+20px顶部和底部的恒定填充：

getImageSize($('.showcase-img'), function(width, height) {
    width > 600 ? calculatedHeight = 600/width * height + 40 : calculatedHeight = height + 40;
    $('.showcase-img-wrapper').css("height", calculatedHeight+"px");
    $('.imagemodal-container').show();
});

---

我不相信你能得到图像的高度，直到它完成加载，所以不确定你的战略将工作。通常情况下，为了保留空间，图像应该使用高度/宽度值进行渲染，浏览器将保留空间，不需要js。您可以开始并修改它以满足您的需要吗？如果您有问题，请在问题中更新。谢谢！我调整了它，它工作了。我会发布我的答案。

getImageSize($('.showcase-img'), function(width, height) {
    width > 600 ? calculatedHeight = 600/width * height + 40 : calculatedHeight = height + 40;
    $('.showcase-img-wrapper').css("height", calculatedHeight+"px");
    $('.imagemodal-container').show();
});