2

Tenho um site em html em que o objectivo era actualizar uma imagem de meio em meio segundo com uma nova. Igual a uma videovigilancia. Mas precisava de saber como se chama a function em html para a imagem ir mudando. Pode parecer uma dúvida bem fraca mas sou novo na programação.

<!DOCTYPE html>
<html lang="en">
<head> 
    <title> Cam1 </title>
    <meta http-equiv="Content-Language" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script>
        function GetImage(){
            setTimeout(function(){
            document.getElementById("img").src = "images/yyy.bmp?t="+Date.now();
            },500);
        }
    </script>
</head>
<body>  
    <!-- não sei como fazer aqui-->
    <img id="img" src="images/yyy.bmp" style="width:304px;height:228px;"/>
</body>
</html>
4
  • O teu código está certo. Só falta chamares a função GetImage. Podes fazer assim: <body onload="GetImage()">. Testa a ver se era isso que procuravas. Uma duvida esse ?t="+Date.now(); é porquê? o servidor vai dar imagens novas com essa query?
    – Sergio
    30/08/2017 às 8:40
  • @Sergio fiz o que disse e acrescentei o onload="GetImage()"> mas em vez de no body, acrencentei na tag img, quanto há sua dúvida, o código foi construido através de vários, e já não estou muito certo a cerca do que ele faz, mas sei que sem ele o função não consegue fazer o get da imagem
    – user88845
    30/08/2017 às 9:14
  • "mas em vez de no body, acrencentei na tag img" - porquê? Na verdade o melhor era usares só o conteúdo da função (só o setTimeout) e colocares esse <script> no final da página antes de </body>. Testa e diz se funcionou.
    – Sergio
    30/08/2017 às 9:17
  • @Sergio não está a funcionar, quando uso no body pode simular e teste se conseguir? e não percebi bem a parte de usar só o setTimeout
    – user88845
    30/08/2017 às 9:23

3 Respostas 3

1

Se essa função GetImage() só é usada para iniciar o setTimeout e se queres que a função seja chamada quando a página carrega, então podes simplificar e fazer assim:

<!DOCTYPE html>
<html lang="en">
<head> 
    <title> Cam1 </title>
    <meta http-equiv="Content-Language" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>  
    <img id="img" src="images/yyy.bmp" style="width:304px;height:228px;"/>

    <script>
        // Este script deve estar depois de todo o HTML
        var img = document.getElementById("img");
        setTimeout(function(){
            img.src = "images/yyy.bmp?t=" + Date.now();
        }, 500);
    </script>
</body>
</html>
0
1

Complementando o comentário do Sergio, Deve-se fazer uma pequena alteração em seu script.

Dentro do método setTimeout chamar a função GetImage() novamente pois fazendo isso toda fez que terminar o tempo estabelecido ele chama a função novamente. Ficando assim seu script:

<script>
    function GetImage(){
        setTimeout(function(){
            document.getElementById("img").src = "images/yyy.bmp?t="+Date.now();
            GetImage();
        },500);
    }
    // Executa a função.
    GetImage();
</script>
4
  • Se o body demorar a carregar (mais de 500ms) pode acontecer que #img ainda não esteja na página e dê erro. Daí que sugeri chamar GetImage(); no onload do body e não no <script>. Nesse caso, ou caso o <script> esteja no fundo da página, a função nem seria necessária: poderia ter somente setTimeout sem função à volta.
    – Sergio
    30/08/2017 às 8:54
  • Vivendo e aprendendo, entendi, é no caso mesmo era só ele chamar mesmo dentro do setTimeout porque se não só ira executar um vez.
    – NoobSaibot
    30/08/2017 às 8:58
  • Exato, só faz a primeira execução passados 500ms.
    – Sergio
    30/08/2017 às 8:59
  • @WéllingthonM.deSouza obrigado pela sugestão vou ainda testar e ver se funciona, no entanto arranjei forma de ficar a dar como o Sergio indicou
    – user88845
    30/08/2017 às 9:34
0

Com a ajuda dos comentários do @Sergio, consegui resolver a minha dúvida fazendo o seguinte ao código:

<!DOCTYPE html>
<html lang="en">
<head> 
    <title> Cam1 </title>
    <meta http-equiv="Content-Language" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script>
        function GetImage(){
            setTimeout(function(){
            document.getElementById("img").src = "images/yyy.bmp?t="+Date.now();
            },500);
        }
    </script>
</head>
<body>  
    <img id="img" onload="GetImage();" src="images/yyy.bmp" style="width:304px;height:228px;"/>
</body>
</html>

Bastou acrescentar onload="GetImage();" na Tag img para tudo ficar a funcionar, vou ainda aguarda por uma nova resposta do @Sergio e se resultar posto a outra sugestão dele.

Você deve fazer log-in para responder a esta pergunta.