Question

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

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

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

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

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

Answer 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包装器宽度（600px）的图像缩小到适合，我不得不根据比例调整高度，并且还考虑了20px + 20px顶部和底部的恒定填充：< / p>

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();
});

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

1 个答案: