网站手动轮播图在iPhone上无法加载的技术求助

我网站中从MySQL关联的图片，仅手动轮播组件内的图片无法在iPhone上加载，其余图片显示正常。已尝试修改图片类型、尺寸，甚至替换为其他可正常加载的图片，但轮播内仍无法加载。

相关代码 #

HTML代码 #

<?php
require_once "connection.php";
$chalet = $_GET['chaletname'];
$q = "select * from search where  ChaletName='$chalet'";
$result = mysqli_query($con, $q);
$row = mysqli_fetch_row($result);
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>View Chalet</title>
        <meta charset="utf-8">
        <link href="CSS/viewcalendar.css" rel="stylesheet" type="text/css"/>
        <link rel="icon" type="image/png" href="images/favicon.png.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="CSS/VChalet.css"> 

        <style>
            body {
                background-image: url("Images/backg1.jpg");
                background-repeat: no-repeat, repeat;
                background-attachment: fixed;
                background-size: 100% 100%;
            }
        </style>
    </head>
    <body>
        <div class="hero">
            <div class="title">
                <h1><?php echo $chalet ?></h1>
            </div>
        </div> <br> <br>

        <div style="width: 80%; margin: auto;" class="slideshow-container">
            <div class="mySlides fade">
                <div class="numbertext">1 / 5</div>
                <img id ="0" src="" style="width:100%; height: 500px;">
            </div>
            <div class="mySlides fade">
                <div class="numbertext">2 / 5</div>
                <img id ="1" src="" style="width:100%; height: 500px;">
            </div>
            <div class="mySlides fade">
                <div class="numbertext">3 / 5</div>
                <img id ="2" src="" style="width:100%; height: 500px;">
            </div>
            <div class="mySlides fade">
                <div class="numbertext">4 / 5</div>
                <img id ="3" src="" style="width:100%; height: 500px;">
            </div>
            <div class="mySlides fade">
                <div class="numbertext">5 / 5</div>
                <img id ="4" src="" style="width:100%; height: 500px;">
            </div>

            <a class="prev" onclick="plusSlides( - 1)">❮</a>
            <a class="next" onclick="plusSlides(1)">❯</a>
        </div>
        <br>

        <div style="text-align:center">
            <span class="dot" onclick="currentSlide(1)"></span> 
            <span class="dot" onclick="currentSlide(2)"></span> 
            <span class="dot" onclick="currentSlide(3)"></span> 
            <span class="dot" onclick="currentSlide(4)"></span> 
            <span class="dot" onclick="currentSlide(5)"></span> 
        </div>

<script>
    const slideimages = "<?php echo $row['11'] ?>";
    let s = slideimages.split("/");
    let sLen = s.length;
    for (let i = 0; i < sLen; i++) {
    var image = document.getElementById(i);
    function changeImage() {
    image.src = "Images/" + s[i];
    }
    changeImage();
    }
</script>

<script>
    let slideIndex = 1;
    showSlides(slideIndex);
    function plusSlides(n) {
    showSlides(slideIndex += n);
    }
    function currentSlide(n) {
    showSlides(slideIndex = n);
    }
    function showSlides(n) {
    let i;
    let slides = document.getElementsByClassName("mySlides");
    let dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
    slideIndex = 1
    }
    if (n < 1) {
    slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
    }
</script>

CSS代码 #

.slideshow-container {
    max-width:85%;
    position: relative;
    margin: auto;
  }
  /* Next & previous buttons */
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }
  
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
  }
  
  /* Caption text */
  .text {
    color: #f2f2f2;
    font-size: 20px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
    text-decoration: solid;
  }
  
  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }
  
  /* The dots/bullets/indicators */
  .dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  
  .active, .dot:hover {
    background-color: #717171;
  }
  
  /* Fading animation */
  .fade {
    animation-name: fade;
    animation-duration: 1.5s;
  }

解决方案 #

1. 修复JavaScript作用域问题 #

循环内嵌套函数会导致变量作用域混乱，iOS Safari对此兼容性较差。简化图片赋值逻辑：

const slideimages = "<?php echo $row['11'] ?>";
let s = slideimages.split("/");
let sLen = s.length;
for (let i = 0; i < sLen; i++) {
    const image = document.getElementById(i);
    if (image) { // 增加元素存在性判断，避免报错中断执行
        image.src = "Images/" + s[i];
    }
}

2. 统一路径大小写 #

iOS Safari对文件路径大小写敏感，检查代码中Images/目录名、图片文件名是否与服务器实际文件完全一致（比如服务器是小写images/，代码里写大写就会加载失败）。

3. 补充fade动画关键帧 #

当前CSS只声明了动画名称和时长，缺少关键帧定义，iOS Safari无法解析动画，可能导致元素显示异常。添加：

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

4. 避免img标签初始src为空 #

空src会触发无效请求，干扰后续加载。可以设置占位图或初始隐藏图片：

<img id="0" src="Images/placeholder.png" style="width:100%; height: 500px;">

5. 验证PHP输出的图片字符串 #

确认$row['11']输出的格式正确（比如img1.jpg/img2.jpg），无多余空格或特殊字符。可临时添加调试代码：

<?php var_dump($row['11']); ?>

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