Question

我正在尝试根据日期自动更改图像。所以我有一个默认图像，然后在假期，它会自动更改为假日主题图像。代码似乎有效，但是当你把它放在一个页面中时，代码会保持循环。任何帮助将非常感激。提前谢谢。

<img id="Logo" src="/images/default.png" alt="Default Image"   onload="logo(this)" />

function logo(img) {
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;
}

Answer 1

问题是您的函数设置为在图像的load事件上运行。然后，该函数交换图像的src，从而导致加载新图像，从而发生另一个load事件，交换图像源等等。

将您的功能设置为load的{{1}}事件：

window

// Set your function to run when the window is loaded
window.addEventListener("load", logo);

// Get your element reference
var img = document.getElementById("Logo");

// This is your callback function
function 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;
}

但是，实际上这不是一个很好的方法，因为图像只会在默认图像加载后进行交换，因此用户会短暂地看到默认图像，然后他们会看到它变为所需的图像。相反，您应该动态设置图像的初始源，以便只加载一个图像。

如果您将<img id="Logo" src="/images/default.png" alt="Default Image">元素放在结束<script>标记（body）之前，浏览器已经将</body>元素解析为内存，但它它还没有设置img，所以用户在那时不会看到任何内容。然后脚本运行并将src设置为右图像。最后，只加载了一个图像，不需要设置事件处理程序。

src

Answer 2

通过设置onload的{{1}}，您可以在加载图片时调用img，这会加载新图片，从而导致logo被调用，...

因此，您需要logo并非总是更改图片，或者您希望在不同情况下调用logo。

javascript图片交换保持循环

2 个答案: