Question

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

这是我的代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

我通过padding-bottom技巧阅读了许多关于响应式背景图像的内容，但在我的情况下，我真的需要在这个＆＃34;背景预览＆＃34;中真正的宽度和高度值。而不是一个比例。我的所有图像都有不同的高度值。

Answer 1

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

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

1 个答案: