延迟加载子图像时显示父

Question

在子图像延迟加载之前，我如何隐藏父div / element？

我当前正在使用vue-lazyload，我已经能够延迟加载图像本身，但是父div的高度是错误的，并且每次都不同。

有没有特定的方法可以做到这一点？还是我应该在img中添加一个min-height属性，这似乎可行，但是id必须使它响应。

例如，我有以下代码：

<a href="/example" class="class-with-border" v-lazy-container="{ selector: 'img' }">
    <img data-src="example.png" lazy="loaded">
</a>

在此示例中，父样式（边框等）加载，而子img尚未加载，因此您会看到父样式的高度变化，这不是很令人满意。

Answer 1

您可以使用加载选项（加载时图像的src）。 像这样：

Vue.use(VueLazyload, {
    preLoad: 1.3,
    loading: 'dist/loading.gif',
    attempt: 1,
  });

并且还请阅读github页面以获取更多选项。