W3 Schools图片轮播加载时图片上下堆叠问题求助

使用W3 Schools图片轮播代码，仅对HTML、CSS添加居中样式，JS无改动。本地使用本地图片时，页面加载/刷新阶段两张图片上下排列（未叠加显示），点击切换箭头后功能恢复正常；替换为Pexels在线图片后该问题消失，求解决办法。

本地图片加载速度慢于在线图片，页面DOM加载完成后JS立即执行，但此时本地图片还未完全渲染，初始时所有.mySlides元素因CSS设置的display: block全部显示，直到点击箭头触发JS修改display属性才恢复轮播状态。在线图片因缓存或CDN加载快，JS执行时图片已就绪，不会出现这个问题。

方法1：CSS默认隐藏所有轮播图，仅显示初始图 #

修改CSS默认隐藏轮播图，给第一张图添加专属类设置初始显示：

.mySlides {
    display: none;
    margin-left: auto;
    margin-right: auto;
}
.mySlides.active {
    display: block;
}
.w3-button {
    display: block;
    margin-left: 210px;
    margin-right: 210px;
}

对应HTML给第一张图加active类：

<img class="mySlides active" src="本地图片路径" style="width:300px">
<img class="mySlides" src="本地图片路径" style="width:300px">

方法2：延迟JS执行，确保图片加载完成 #

将JS代码包裹在window.onload事件中，等待所有资源（包括图片）加载完成后再执行：

window.onload = function() {
    var slideIndex = 1;
    showDivs(slideIndex);

    function plusDivs(n) {
        showDivs(slideIndex += n);
    }

    function showDivs(n) {
        var x = document.getElementsByClassName("mySlides");
        if (n > x.length) {slideIndex = 1}
        if (n < 1) {slideIndex = x.length}
        for (var i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        x[slideIndex-1].style.display = "block";
    }
}

方法3：优化初始CSS布局（可选） #

通过绝对定位让轮播图叠加，避免上下排列：

.w3-content.w3-display-container {
    position: relative;
    width: 300px;
    margin: 0 auto;
}
.mySlides {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

此方法需确保容器有固定宽高，避免布局错乱。

<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {
    display: none;
    margin-left: auto;
    margin-right: auto;
}
.mySlides.active {
    display: block;
}
.w3-button {
    display: block;
    margin-left: 210px;
    margin-right: 210px;
}
</style>
</head>

<div class="w3-content w3-display-container">
    <img class="mySlides active" src="本地图片1路径" style="width:300px">
    <img class="mySlides" src="本地图片2路径" style="width:300px">
    <button class="w3-button w3-brown w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
    <button class="w3-button w3-brown w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var x = document.getElementsByClassName("mySlides");
    if (n > x.length) {slideIndex = 1}
    if (n < 1) {slideIndex = x.length}
    for (var i = 0; i < x.length; i++) {
        x[i].style.display = "none";
        x[i].classList.remove("active");
    }
    x[slideIndex-1].style.display = "block";
    x[slideIndex-1].classList.add("active");
}
</script>

内容的提问来源于stack exchange，提问作者Rhinestone34223