如何防止幻燈片的 figcaption 在每個圖像加載時上下跳躍？

Question

我在這上面花了很多時間。

我在用着

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

在 Google 的優化建議中，圖像僅在用戶實際看到時才會加載。 然而，這意味着瀏覽器無法提前布局頁面，因此在加載圖像時會移動頁面元素。 我已經通過在我的圖像框上指定一個高度來解決其中的一些問題，這樣整個頁面就不會上下跳躍。

可悲的是，盡管每張幻燈片底部的 figcaption 繼續上下跳躍，而瀏覽器正在獲取下一張圖片。 我嘗試了各種方法來指定每個幻燈片圖像的高度，使用我的 mySlidesV class，但谷歌似乎只是在加載之前忽略了這一點。

因為我正在根據媒體查詢加載不同尺寸的圖像，所以我的 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 class 和 figcaption 的下一個選擇器。 一旦lazysizes加載圖像，它會從圖像中刪除lazyload class，這將忽略下面的CSS並允許在圖像顯示后顯示figcaption。

.lazyload + figcaption{
    display:none;
}