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

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> 中实现，但仅适用于页面加载时在视口中可见的图像，因为延迟加载。

我读了很多关于响应式背景图像的内容，但在我的例子中，我真的需要这个 "background preview" 的实际宽度和高度值，而不是比率。我所有的图片都有不同的高度值。

Answer 1

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

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

How to fix image wrap size with the same size of Lazy Load image?

javascript

jquery

image

lazy-loading

dimensions