如何防止幻灯片的figcaption在每张图片加载时上下跳动？

Question

我花了很多时间在这上面。

我正在使用

<!-- phased loading of images -->
<script src="lazysizes.min.js" async=""></script>

在谷歌的优化建议下，所以图片只在用户实际能看到的时候才会加载。 然而这意味着浏览器无法提前布局页面，因此会在图片加载时移动页面元素。 我通过在图片框上指定一个高度来解决一些问题，这样整个页面就不会上下跳跃。

但遗憾的是，每张幻灯片底部的无花果标题都会继续上下跳跃，而浏览器则会获取下一张图片。 我已经尝试了各种方法来指定每个幻灯片图片的高度，使用mySlidesV类，但google似乎只是忽略，直到它加载。

因为我根据媒体查询加载不同尺寸的图片，我的css越来越复杂，什么是最稳健和干净的方法来解决这个问题？

这是一个幻灯片的例子。

<div class="slideshow-container">
<picture class="mySlidesV">
        <source media="(max-width: 374px)" data-srcset="imagesIndex/slideshow-vertical/victoria-street-cropped-540.webp" type="image/webp">
        <source data-srcset="imagesIndex/slideshow-vertical/victoria-street-wide-540.webp" type="image/webp">       
        <source media="(max-width: 374px)" data-srcset="imagesIndex/slideshow-vertical/victoria-street-cropped-540_guetzli.jpg">
        <img data-src="imagesIndex/slideshow-vertical/victoria-street-wide-540_guetzli.jpg" alt="A Harry Potter tour dressed in cosplay poses on Victoria Street" class="lazyload"/>
  <figcaption class="slides-vertical">Victoria Street, reputed to be the inspiration for Diagon Alley. Over summer we stop here for Scottish ice-cream; this class just had a standard Cheering charm, I love a fizzy brain</figcaption>
</picture>

<picture class="mySlidesV">
        <source data-srcset="imagesIndex/slideshow-vertical/floating-witch-540.webp" type="image/webp">
        <img data-src="imagesIndex/slideshow-vertical/floating-witch-540_guetzli.jpg" alt="Young Witch in a Sorting Hat floats in mid air above Princes Street Edinburgh, the Castle in the background" class="lazyload">

  <figcaption class="slides-vertical">Had a young witch on the tour today, she doesn't even need a broom</figcaption>
</picture>

  <button class="w3-button w3-display-left" onclick="plusDivsV(-1)"><span style="color: white;">&#10094;</span></button>
  <button class="w3-button w3-display-right" onclick="plusDivsV(1)"><span style="color: white;">&#10095;</span></button>
</div>

我在这里使用的是W3c的幻灯片。https://www.w3schools.com/howto/howto_js_slideshow.asp

Answer 1

你可以随时隐藏 figcaption 在页面加载时，使用lazyload类和figcaption的下一个选择器。一旦lazysizes加载图片，它就会删除掉图像的 lazyload 类，这将忽略下面的CSS，并允许在图片显示后显示 figcaption。

.lazyload + figcaption{
    display:none;
}