如何使用HTML、CSS、JS实现页面重载时加载随机图片

• 脚本执行时机错误：你将<script>标签放在<head>中，代码执行时<body>内的<img>元素还未完成渲染，document.getElementById('image_shower_vehicule')会返回null，导致赋值失败。
• 函数未调用：你定义了getRandomImagevehicule随机图片生成函数，但没有主动触发执行，逻辑不会自动生效。
• 可能存在的路径匹配问题：需要确认相对路径和站点根目录的对应关系，避免图片加载404。

1. 调整HTML脚本引入位置 #

把script标签从head移到body闭合标签之前，确保DOM加载完成后再执行JS代码：

<head>
</head>
<body>
  <div id="container">
    <img id="image_shower_vehicule" class="vehicule" />
  </div>
  <script type="text/javascript" src="../src/index.js"></script>
</body>
</html>

2. 修改JS代码，主动调用函数 #

在index.js末尾添加函数调用，同时建议为内部变量添加声明避免全局污染：

var images_array_vehicule = ['vehicule1.png','vehicule2.png','vehicule3.png'];

function getRandomImagevehicule() {
  const random_index_vehicule = Math.floor(Math.random() * images_array_vehicule.length);
  const selected_image_vehicule = images_array_vehicule[random_index_vehicule];
  // 路径如果加载失败可以调整，比如如果html在public目录下，可改为 `/layers/vehicule/${selected_image_vehicule}`
  document.getElementById('image_shower_vehicule').src =`../public/layers/vehicule/${selected_image_vehicule}`;
}

// 页面加载完成后执行随机图片逻辑
getRandomImagevehicule();

3. 后续多图层扩展方案 #

你要做多层随机叠加的话，可以把逻辑封装为通用函数，后续新增图层只需要传入对应配置即可：

// 通用随机图片配置
const layerConfigs = [
  {
    imgId: 'image_shower_vehicule',
    imgList: ['vehicule1.png','vehicule2.png','vehicule3.png'],
    basePath: '../public/layers/vehicule/'
  },
  // 后续新增图层直接加配置即可
  // {
  //   imgId: 'image_shower_background',
  //   imgList: ['bg1.png','bg2.png'],
  //   basePath: '../public/layers/background/'
  // }
]

function setRandomImage(layerConfig) {
  const randomIndex = Math.floor(Math.random() * layerConfig.imgList.length);
  const selectedImg = layerConfig.imgList[randomIndex];
  document.getElementById(layerConfig.imgId).src = `${layerConfig.basePath}${selectedImg}`;
}

// 批量执行所有图层的随机逻辑
layerConfigs.forEach(config => setRandomImage(config))

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