javascript - 如何使用滑块（CSS/Javascript）减少 CLS（累积布局移位）？

Question

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

这个滑块在我的连接上加载得足够快，以至于我什至很难看到这种转变，但我同意任何转变都可能很麻烦，我想相应地修复它。本质上，我想修改代码，以便它快速勾勒出一个动态框，该框的大小是在加载图像之前将加载的图像大小，因此如果用户滚动过去并在第一张图像之前开始阅读，则以下文本不会向下移动在滑块加载中。

在 Google 的默认优化累积布局转换建议中，该公司建议添加图像的宽度和高度——就像在响应前的日子里一样——并像这样添加height: auto到imgCSS 中的代码中：

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

这适用于直接在动态布局中显示的图像，但不适用于滑块代码中的图像，因为图像不是作为img标签呈现，而是作为a href无序列表中列表项中的链接（标签）呈现。

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

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

#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 上的这篇文章是我能够挖掘的唯一相关文章，答案表明display: none使用 CSS 类添加“块”可以解决问题。

根据我对display:none 工作原理的理解，我认为这只会阻止滑块出现，但我仍然尝试将其添加到ninja_sliderdiv 以及slider_inner类ul和li元素中。那没起效。我的代码与默认代码类似，但如果实时实现有帮助，请点击此处。

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

标签： javascriptcsssliderresponsivecls