Question 44813 in Html Question posted in
Some basic documentation can be found here.

Display "Splash" image until new uploaded image, then display new image for x seconds – Html

I want to create a html/javascript page that displays a splash image (splash.jpg) until there is an image file (latest.jpg) has been overwritten.

I want to display this latest.jpg for 90 seconds and then switch back to splash.jpg until the new latest.jpg file is overwritten.

I wish I could show what I’ve have thus far but I’ve tried a many different methods of accomplishing this and not sure I know which one is most practical or efficient.

I’ve tried several pieces found here and elsewhere.

Tags:

2

Answers


  1. 0

    I’m not sure what you’re trying to accomplish, but going off what you said a common simple solution is to continuously ping the server for a new version of a file with ajax on the browser. If you want to get more complicated you could use WebSockets but that may be overkill for what you’re trying to do.

    I recommend you have a .txt file with a hash of the image on the server that the browser ajax can check to save bandwidth.

    Example code:

    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 (uses 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 );
});

    Your server environment should update the hash.txt file to contain the hash of the latest.jpg image when it updates.

    Login or Signup to reply.
  2. 0 
    <!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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search