我在谷歌页面速度测试中获得了低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);
}
您必须将display: none作为块的默认值，例如使用css类。如果您的javascript位于页面的末尾(应该是这样(，则浏览器会在您从javascript 中放入display: none之前开始加载图像
因此，您在处理"滑块"；(从显示的代码来看，这不是一个滑块，而是一个接一个地显示图像(。
问题一
第一个是您已经确定的初始页面加载。
这些图像将全部加载，然后在它们相互堆叠时最终移动页面。
最简单的解决方案是在<head>中使用一些内联css来隐藏所有滑块图像。
<head>
<style>
.single-slide{display: none}
</style>
</head>
它必须是内联的，否则CSS可能应用得太晚，您的幻灯片仍将显示。
然后根据需要取消隐藏它们，类似于您现在的操作方式。
这带来了另一个问题。
加载第一张幻灯片时会发生什么？然后图像就会出现，你会得到一个巨大的布局变化。
问题2
将幻灯片添加到页面时的布局发生变化。
解决这一问题的方法也相当直接。您需要在包装中显示您的图像，在包装中您可以定义大小并添加overflow: hidden，以确保如果图像没有正确的比例，则大小不会更改。
同样，这需要定义inline，否则包装器将以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不会受到影响，但用户体验不会很好。
相反，将新图像添加到顶部，然后隐藏所有其他图像，这将确保没有白色闪光。