为何使用img标签的onload属性会导致图片切换闪烁？

嘿，这个闪烁问题我太熟了！原因其实很直白：你的img标签一开始会优先加载src属性里的carmainpic.jpg，等这张图加载完成触发onload事件后，你又把它替换成随机选中的另一张图——这就造成了先显示默认图、再跳转到新图的闪烁感，完全是两次图片加载的视觉冲突。

核心解决方案：提前设置随机图片，避免二次加载 #

我们可以跳过“先加载默认图再替换”的步骤，在页面初始化时直接给img设置随机选中的图片，这样就不会有闪烁了。

调整后的代码示例：

HTML部分：

<img id="randomimage" src="" alt="main pic of car"/>

这里把src留空，避免一开始加载默认图，同时保留alt属性保证页面可访问性。

JavaScript部分：

function randomImg() {
  const images = ["images/carmainpic.jpg", "images/carmainpic2.jpg", "images/carmainpic3.jpg"];
  const randomIndex = Math.floor(Math.random() * images.length);
  document.getElementById("randomimage").src = images[randomIndex];
}

// 确保DOM加载完成后再执行函数，避免找不到img元素
window.addEventListener('DOMContentLoaded', randomImg);

为什么这个方法能解决闪烁？ #

因为我们在页面DOM结构加载完成后，直接给img设置了随机选中的图片地址，从始至终只加载一次图片，没有“先显示默认图再替换”的过程，自然就不会出现闪烁了。

额外小提示 #

如果担心空src可能带来的小问题（比如某些浏览器的默认占位符），也可以先把img设置为隐藏状态，等图片加载完成后再显示：

function randomImg() {
  const imgElement = document.getElementById("randomimage");
  const images = ["images/carmainpic.jpg", "images/carmainpic2.jpg", "images/carmainpic3.jpg"];
  const randomIndex = Math.floor(Math.random() * images.length);
  
  // 先隐藏图片
  imgElement.style.display = 'none';
  
  // 图片加载完成后显示
  imgElement.onload = function() {
    imgElement.style.display = 'block';
  };
  
  imgElement.src = images[randomIndex];
}

window.addEventListener('DOMContentLoaded', randomImg);

不过这种场景下，第一种方法已经足够简洁有效啦。

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