gpt4 book ai didi

javascript图像交换不断循环

转载 作者:行者123 更新时间:2023-12-03 01:49:48 25 4
gpt4 key购买 nike

我正在尝试制作一个根据日期自动更改的图像。所以我有一个默认图像,然后在假期时,它会自动更改为假期主题图像。该代码似乎可以工作,但是当您将其放入页面中时,代码会不断循环。任何帮助将非常感激。提前致谢。

<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;
}

最佳答案

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

将您的函数设置为在 load 上运行事件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到正确的图像。最后,只加载一张图像,不需要设置事件处理程序。

<body>
<img id="Logo" src="" alt="Correct Image">
<script>
// Just determine the appropriate source:
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";
}

// And then set the image to it:
document.getElementById("Logo").src = src;
</script>
</body>

关于javascript图像交换不断循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50472110/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com