我的 js 滑块导致 CLS 分数低：如何更改我的滑块加载方式？

Question

我在 google 页面速度测试中的 CLS（布局偏移）分数很低，我发现这是因为我的滑块加载方式。当页面加载时（主要是在慢速连接上），滑块的图像全部加载到彼此下方，当页面加载完成并且 javascript 加载时，只有那时其他图像才会隐藏并开始滑动。

我根据教程创建了以下滑块。我不知道如何解决这个问题。我认为最好的方法是尝试隐藏所有其他图像（第一个图像除外），直到加载 javascript 。有没有办法用 javascript 来实现？或者有更好的解决方案

解决这个问题的最佳方法是什么？这是我的滑块代码：

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("single-slide");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = "block";
  setTimeout(showSlides, 6000); 
}

Answer 1

您必须将 display: none 作为您块的默认设置，例如使用 css 类。如果您的 javascript 位于页面末尾（应该如此），浏览器会在您将 display: none 来自 javascript

之前开始加载图像

Answer 2

所以您在处理“滑块”的方式上遇到了一些问题（因为从代码显示的那一刻起，这不是一个滑块，而是一个接一个地显示图像）。

问题一

如您所见，第一个是在初始页面加载时。

图像将全部加载，然后最终移动页面，因为它们相互堆叠。

最简单的解决方案是在 <head> 中添加一些内联 css 来隐藏所有滑块图像。

<head>
    <style>
        .single-slide{display: none}
    </style>
</head>

它必须是内联的，否则 CSS 可能应用得太晚，您的幻灯片仍会显示。

然后根据需要取消隐藏它们，类似于您现在的做法。

这引入了另一个问题。

加载第一张幻灯片时会发生什么？然后图像就会出现，你会得到一个巨大的布局转变。

问题 2

将幻灯片添加到页面后的版式偏移。

这个问题的解决方案也很简单。您需要在包装器中显示图像，您可以在其中定义尺寸并添加 overflow: hidden 以确保在图像比例不正确时尺寸不会改变。

再次需要定义内联否则包装器将从 0 高度和宽度开始，然后在 CSS 加载时使页面跳转。

因此您的页面大致如下所示：

<html>
    <head>
        <style>
            .single-slide{
                display: none
            }
            .wrapper{
                width: 100%; 
                height: 600px;
                overflow:hidden; 
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <img class="single-slide"/>
            <img class="single-slide"/>
        </div>
    </body>
</html>

另一个与 CLS 无关的问题

使用当前滑块隐藏所有图像，然后添加新图像，在速度较慢的设备上，这可能会在很短的时间内不显示任何图像。

现在，如果您按照建议在页面上放置固定大小的包装器，CLS 不会受到影响，但用户体验不会很好。

而是将新图像添加到顶部，然后隐藏所有其他图像，这将确保不会出现白色闪烁。

我的 js 滑块导致 CLS 分数低：如何更改我的滑块加载方式？

My js slider is causing a low CLS score: How to change the way my slider loads?

javascript

css

performance

pagespeed

google-pagespeed

问题一

问题 2

另一个与 CLS 无关的问题