如何使用相同大小的Lazy Load映像修复图像包大小？

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>

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

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

Answer 1

最后，我找到了de lazy load插件调用lazysizes的替代解决方案。它允许使用具有完全大小的背景颜色而不是正在加载的图像。