javascript 显示“启动”图像，直到上传新图像，然后显示新图像x秒

voj3qocg 于 2023-02-28 发布在 Java

关注(0)|答案(2)|浏览(117)

我想创建一个html/javascript页面，该页面显示一个启动图像（splash.jpg），直到有一个图像文件（latest.jpg）被覆盖。
我想将这个latest.jpg显示90秒，然后切换回splash.jpg，直到新的latest.jpg文件被覆盖。
我希望我能展示我迄今为止所拥有的，但我已经尝试了许多不同的方法来完成这一点，我不知道哪一个是最实用或有效的。
我试过这里和其他地方找到的几件。

JavaScript

来源：https://stackoverflow.com/questions/75575744/display-splash-image-until-new-uploaded-image-then-display-new-image-for-x-se

2条答案

按热度按时间

mbyulnm01#

我不知道你想达到什么目的，但是一个常见的简单的解决方案是在浏览器上使用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文件，以便在更新时包含最新的. jpg图像的散列。

赞(0）回复(0）举报 2023-02-28

brccelvz2#

<!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>

赞(0）回复(0）举报 2023-02-28

我来回答

javascript 显示“启动”图像，直到上传新图像，然后显示新图像x秒

2条答案

相关问题

热门标签

最新问答