页面刷新时通过预设/随机图片链接更换img标签src属性可行吗？

当然可以！这是个非常常见的需求，完全不需要依赖点击事件——页面加载（或刷新）时自动切换图片的实现方式有好几种，我给你整理几个实用的方案：

方案一：从预设集合中随机切换图片 #

这个方案适合每次刷新展示随机一张图片的场景，用原生JavaScript就能轻松实现：

// 先定义好你的图片链接集合，可以是相对路径或绝对路径
const imageUrls = [
  'images/spring.jpg',
  'images/summer.jpg',
  'images/autumn.jpg',
  'images/winter.jpg'
];

// 监听页面加载完成事件，确保DOM元素已就绪
window.addEventListener('DOMContentLoaded', function() {
  // 获取目标img元素（这里假设它的id是"random-image"，你可以改成自己的选择器）
  const targetImg = document.getElementById('random-image');
  
  if (targetImg) {
    // 生成随机索引，范围是0到图片数组长度-1
    const randomIdx = Math.floor(Math.random() * imageUrls.length);
    // 给img设置新的src属性
    targetImg.src = imageUrls[randomIdx];
    // 别忘了设置alt属性，提升页面可访问性
    targetImg.alt = `随机风景图 ${randomIdx + 1}`;
    
    // 可选：添加图片加载失败的 fallback 处理
    targetImg.addEventListener('error', function() {
      this.src = 'images/fallback-default.jpg';
      this.alt = '加载失败的默认图片';
    });
  }
});

小提示： #

• DOMContentLoaded 事件会在DOM结构加载完成后触发，比 window.load 更早（后者要等所有资源包括图片加载完），如果你的图片元素是直接写在HTML里的，用这个更高效。
• 如果是动态生成的img元素，可能需要把逻辑放在元素创建完成之后。

方案二：按固定顺序循环切换图片 #

如果你希望每次刷新按顺序展示下一张图片（而不是随机），可以用 localStorage 记录当前的图片索引，实现循环轮换：

const imageUrls = [
  'images/breakfast.jpg',
  'images/lunch.jpg',
  'images/dinner.jpg'
];

window.addEventListener('DOMContentLoaded', function() {
  const targetImg = document.getElementById('cycle-image');
  if (!targetImg) return;
  
  // 从localStorage读取上次记录的索引，默认从0开始
  let currentIdx = parseInt(localStorage.getItem('currentImageIndex')) || 0;
  // 切换到下一张，超出数组长度就重置为0
  currentIdx = (currentIdx + 1) % imageUrls.length;
  
  // 更新图片src和alt
  targetImg.src = imageUrls[currentIdx];
  targetImg.alt = `今日餐食 ${currentIdx + 1}`;
  
  // 把新的索引存回localStorage，下次刷新时用
  localStorage.setItem('currentImageIndex', currentIdx);
});

这个方案的好处是用户每次刷新能看到有序的图片轮换，不会重复（直到循环完一轮）。

框架场景下的思路（可选） #

如果你用React、Vue这类框架，核心逻辑还是一样的，只是触发时机和元素获取方式不同：

• React：在 useEffect 钩子中执行图片切换逻辑，依赖项为空数组确保只在组件挂载（页面加载）时执行一次。
• Vue：在 mounted 生命周期钩子中编写切换代码。

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