我想创建一个显示启动图像 (splash.jpg) 的 html/javascript 页面，直到有一个图像文件 (latest.jpg) 被覆盖。
我想显示这个 latest.jpg 90 秒，然后切换回 splash.jpg 直到新的 latest.jpg 文件被覆盖。
我希望我能展示我到目前为止所拥有的，但我已经尝试了很多不同的方法来实现这一点，但不确定我知道哪种方法最实用或最有效。
我试过在这里和其他地方找到的几件作品。
我不确定你想要完成什么，但是你所说的一个常见的简单解决方案是在浏览器上使用 ajax 不断地 ping 服务器以获取文件的新版本。如果你想变得更复杂，你可以使用 WebSockets，但这对于你想要做的事情来说可能有点过头了。
我建议你在服务器上有一个带有图像哈希的 .txt 文件，浏览器 ajax 可以检查它以节省带宽。
示例代码：
HTML
<!DOCTYPE html>
<html>
<head>
<title>Image Checker</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
<style>
#image {
max-width: 100%;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<img id="image" src="splash.jpg">
</body>
</html>
Javascript（使用 jQuery）
var currentHash = "";
var pingInterval = 3000;
var displayInterval = 90000;
var displayTimer = 0;
$(document).ready(function() {
var intervalId = setInterval(function() {
// Check for updated hash.txt periodically with ajax
$.ajax({
url: "hash.txt",
type: "HEAD",
error: function() {
//Issue checking for new image
$("#image").attr("src", "splash.jpg");
},
success: function(data) {
//Check if hash is new
if (data != currentHash) {
currentHash = data;
// Latest image found
$("#image").attr("src", "latest.jpg");
if (displayTimer != -1)
clearInterval(displayTimer);
displayTimer = setInterval(function() {
// Switch back to splash image after 90 seconds
$("#image").attr("src", "splash.jpg");
}, displayInterval);
}
}
});
}, pingInterval );
});
您的服务器环境应该在更新时更新 hash.txt 文件以包含 latest.jpg 图像的哈希值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<head>
<title>My Web</title>
</head>
<body>
<img id="splash" src="splash.jpg" alt="splash.jpg" />
</body>
<script>
window.onload = function () {
// Obtener la imagen de bienvenida
var splash = document.getElementById("splash");
setInterval(function () {
// Add SRC-1 HERE
splash.src = "latest.jpg";
splash.alt = "latest.jpg";
setTimeout(function () {
splash.alt = "splash.jpg";
// Add SRC-2 HERE
splash.src = "splash.jpg";
}, 1000);
}, 2000);
};
</script>
</html>