JavaScript图片自动切换持续循环问题求助

我一眼就看出问题所在了：当你在onload事件里修改图片的src属性时，浏览器会重新加载新的图片，新图片加载完成后又会触发onload事件，再次调用logo函数，这样就形成了无限循环。下面给你两个简单可行的解决方案：

方案一：移除onload事件打破循环 #

在设置新的图片地址之前，先把图片的onload事件清空，这样后续图片加载就不会重复触发这个函数了：

<img id="Logo" src="/images/default.png" alt="Default Image" onload="logo(this)" />
<script>
function logo(img) {
  // 关键步骤：先移除onload事件，避免重复触发
  img.onload = null;
  
  var d = new Date();
  var Today = d.getDate();
  var Month = d.getMonth(); // 注意：月份从0开始计数，4代表5月
  var src;
  
  if (Month === 4 && (Today >= 21 && Today <= 23)) {
    src = "/images/holiday.png";
  } else {
    src = "/images/default.png";
  }
  
  img.src = src;
}
</script>

方案二：改用页面加载事件执行逻辑 #

更稳妥的方式是不依赖图片的onload事件，而是等整个页面DOM加载完成后再执行一次图片切换逻辑，这样只会运行一次，完全不会有循环问题：

<img id="Logo" src="/images/default.png" alt="Default Image" />
<script>
// 等页面DOM结构加载完成后执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  var img = document.getElementById('Logo');
  var d = new Date();
  var Today = d.getDate();
  var Month = d.getMonth();
  var src;
  
  if (Month === 4 && (Today >= 21 && Today <= 23)) {
    src = "/images/holiday.png";
  } else {
    src = "/images/default.png";
  }
  
  img.src = src;
});
</script>

额外提醒 #

注意getMonth()返回的是0到11的数值，所以Month === 4对应的是5月，如果你原本想判断的是4月，记得改成Month === 3哦。

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