每15秒切换随机图片时页面加载后无法立即展示图片问题如何解决

问题根源是setInterval的原生执行规则：首次执行回调前会先等待完整的间隔时长，所以你现有代码里img标签初始src为空，必须等15秒才会加载第一张图。

修改思路很简单：把图片切换逻辑封装为独立函数，页面加载后先手动调用一次函数加载首图，再把函数交给定时器做定时循环调用即可，同时可以优化随机数取值逻辑避免硬编码：

<!DOCTYPE html>
<html>
<body>

<div class="center">
    
<img src="" id="image">

</div>

    
<script type="text/javascript">
    let image = document.getElementById('image');
    let images = ['image1.png', 'image2.png', 'image3.png', 'image4.png', 'image5.png', 'image6.png', 'image7.png', 'image8.png', 'image9.png', 'image10.png', 'image11.png', 'image12.png', 'image13.png', 'image14.png', 'image15.png', 'image16.png', 'image17.png', 'image18.png', 'image19.png', 'image20.png', 'image21.png', 'image22.png', 'image23.png', 'image24.png', 'image25.png', 'image26.png', 'image27.png', 'image28.png', 'image29.png', 'image30.png', 'image31.png', 'image32.png', 'image33.png', 'image34.png', 'image35.png', 'image36.png', 'image37.png', 'image38.png', 'image39.png', 'image40.png', 'image41.png', 'image42.png', 'image43.png', 'image44.png', 'image45.png', 'image46.png', 'image47.png', 'image48.png', 'image49.png', 'image50.png', 'image51.png', 'image52.png', 'image53.png', 'image54.png', 'image55.png', 'image56.png', 'image57.png', 'image58.png', 'image59.png', 'image60.png', 'image61.png', 'image62.png', 'image63.png', 'image64.png', 'image65.png', 'image66.png', 'image67.png', 'image68.png', 'image69.png', 'image70.png', 'image71.png', 'image72.png', 'image73.png', 'image74.png', 'image75.png', 'image76.png', 'image77.png', 'image78.png', 'image79.png', 'image80.png', 'image81.png', 'image82.png', 'image83.png', 'image84.png', 'image85.png', 'image86.png', 'image87.png', 'image88.png', 'image89.png', 'image90.png', 'image91.png', 'image92.png', 'image93.png', 'image94.png', 'image95.png', 'image96.png', 'image97.png', 'image98.png', 'image99.png', 'image100.png']
    // 封装独立的图片切换函数
    function changeImage() {
        let random = Math.floor(Math.random() * images.length);
        image.src = images[random];
    }
    // 页面加载后立刻执行一次，加载首图
    changeImage();
    // 定时每15秒切换一次
    setInterval(changeImage, 15000);
    </script>
    </body>
</html>

主要修改点 #

• 将图片切换逻辑抽为独立changeImage函数，复用性更高
• 定义函数后立即调用一次，实现页面加载完成即展示随机首图的需求
• 随机数取值从固定* 100改为* images.length，后续增减图片列表内容不需要同步修改数值，降低出错概率

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