如何使用相同大小的延迟加载图像修复图像换行大小？

Question

我正在寻找在延迟加载之前显示背景颜色的图像，并且图像的尺寸完全相同。我的脚本包含每个图像的宽度和高度，并应用于图像包装。

这是我的代码：

$(document).ready(function() {
  $('section .lazywrap').each(function() {

    var lazyWrap = $(this);
    var img = $(lazyWrap, this);

    lazyWrap.width(img.width());
    lazyWrap.height(img.height());

    console.log(lazyWrap.height());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="/" class="lazy-wrap">
  <img class="lazy" width="472" src="img.jpg" data-original="img.jpg">
</a>

Web浏览器即使没有在<img>中实现也可以获得高度值，但仅适用于页面加载时在视口中可见的图像，因为延迟加载。

我阅读了很多关于使用 padding-bottom 技巧的响应式背景图像的内容，但在我的情况下，我真的需要这个“背景预览”的真实宽度和高度值，而不是比例。我所有的图片都有不同的高度值。

Answer 1

最后，我找到了一个替代解决方案，即延迟加载插件调用lazysizes。它允许使用与正在加载的图像大小完全相同的背景颜色。