如果图像已开始加载，则显示 div [重复]答案

【问题标题】：If image has begun to load, show div [duplicate]如果图像已开始加载，则显示 div [重复]
【发布时间】：2016-03-20 15:53:14
【问题描述】：

我相信以下内容会等到图像完全加载：

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

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

容器的高度是响应式height: auto 并且图像具有不同的高度，因此容器开始时没有高度（仅 20px 填充），然后根据其内部图像的高度快速调整其高度，这很友善每次加载时的光栅。

有什么方法可以检查图像是否已经开始加载，以便我可以调整图像容器的高度，然后做$('.imagemodal-container').show()，因为等待整个图像加载是不好的用户体验。

【问题讨论】：

我不相信你可以在加载完成之前获得图像的高度，所以不确定你的策略是否有效。通常要预留空间，图片应该用高/宽值渲染，浏览器会预留空间，不需要js。
您可以从this 开始并修改它以满足您的需要吗？如果您有问题，请在您的问题中更新。
谢谢！我调整了它并且它起作用了。我会发布我的答案。

标签： javascript jquery html css image

【解决方案1】：

使用来自this answer 的getImageSize 函数：

function getImageSize(img, callback) {
      var $img = $(img);

      var wait = setInterval(function() {
          var w = $img[0].naturalWidth,
              h = $img[0].naturalHeight;
          if (w && h) {
              clearInterval(wait);
              callback.apply(this, [w, h]);
          }
      }, 30);
}

由于大于 img wrapper 宽度（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();
});

【讨论】：