如何使用滑块(CSS/Javascript)减少 CLS(累积布局移位)?

我是 Ninja Slider 响应式图像滑块脚本 (CSS/Javascript) 的付费用户,它一直运行良好。不幸的是,谷歌现在警告说,它会导致在响应式布局中放置一个不可接受的大 CLS(累积布局移位)。我很乐观地看到 Stackoverflow 上的某个人已经调整了这段代码——或者类似的代码——并且可以提供帮助。

这个滑块在我的连接上加载得足够快,以至于我什至很难看到这种转变,但我同意任何转变都可能很麻烦,我想相应地修复它。本质上,我想修改代码,以便它快速勾勒出一个动态框,该框的大小与将要加载的图像 **before loading the image** 在滑块加载中。

在 Google 的默认 Optimize Cumulative Layout Shift 建议中,该公司建议添加图像的宽度和高度 - 就像在响应前的日子一样 - 并将 height: auto 添加到 CSS 中的 img 代码中,如下所示:

img {
  width: 100%; /* or max-width: 100%; */
  height: auto;
}

这适用于直接在动态布局中显示的图像,但不适用于滑块代码中的图像,因为图像不显示为 img 标记,而是显示为列表项中的链接( a href 标记)无序列表。

尽管如此,我还是尽职尽责地尝试在 height: auto div 和 #ninja_slider 类中我认为可能相关的适用 CSS 文件中添加 slider-inner 。这并没有破坏任何东西,但也没有解决问题。默认 CSS 代码是 here

根据要求,我相信这是相关代码,但我可能是错的,查看完整代码可能很有用:

#ninja-slider {
    width:100%;
    background:#191919;
    padding: 30px 0;

    margin:0 auto;
    overflow:hidden;
    box-sizing:border-box;

}

#ninja-slider .slider-inner {
    max-width:600px;
    margin:0 auto;/*center-aligned */
    font-size:0px;
    position:relative;
    box-sizing:border-box;

}

StackOverflow 上的 This post 是我能够挖掘的唯一相关的,答案表明使用 CSS 类在“块”上添加 display: none 可以解决问题。

根据我对 display:none works 的理解,我认为这只会阻止滑块出现,但我仍然尝试将其添加到 ninja_slider div 以及 slider_inner 类和 ulli 元素。那没起效。我的代码类似于默认代码,但如果实时实现有帮助,它是 here

我在看什么?如何更改滑块代码以快速显示一个将很快容纳图像的框,以便随后放置的文本将保留在原位并且在图像加载时不会被按下?谢谢你。

stack overflow How to Reduce CLS (Cumulative Layout Shift) with Slider (CSS/Javascript)?
原文答案