Aggiornamento immagine

**Sonikag** · 16-03-2021, 10:09

Ciao,
ho una pagina che carica due jpg estratti da una telecamera.
Vorrei fare un aggiornamento (solo delle due immagini) non di tutta la pagina ogni secondo.
La cosa non mi convince molto...
Sonia

**ninja72** · 16-03-2021, 12:17

banalmente potresti farlo solamente con "setInterval()", per esempio:

codice:

const img1 = document.getElementById('img1')
const img2 = document.getElementById('img2')
    setInterval(()=>{
        img1.setAttribute('src','img1.jpg')
        img2.setAttribute('src','img2.jpg')
        console.log('caricata')
    },1000);

**Sonikag** · 16-03-2021, 15:36

Grazie, ma purtroppo qualcosa non va.

codice:

script>
const img1 = document.getElementById('img1')
const img2 = document.getElementById('img2')
    setInterval(()=>{
        img1.setAttribute('src','img1.jpg')
        img2.setAttribute('src','img2.jpg')
        console.log('caricata')
    },1000);

</script>

<h4>Cancello 1</h4>
<img src="http://192.168.1.216:8080/picture.jpg" class='imm' id="img1"/></img>
<h4>Cancello 2</h4>
<img src="http://192.168.1.215:8080/picture.jpg" class='imm' id='img2'/></img>

14:35:23.476 Uncaught TypeError: img1 is null
<anonymous> http://192.168.1.8/PPP/ref.php:67
ref.php:67:9

Dove la riga 67 è:

codice:

img1.setAttribute('src','img1.jpg')

Grazie
Sonia

**ninja72** · 16-03-2021, 16:42

Il mio voleva essere solo un esempio, ovvio che non poteva funzionare non sapendo nulla del tuo progetto.

I consigli che posso provare a darti, sono:

1) il tag script mettilo prima della fine del tag body
2) sostituisci il nome dei file immagine (con relativo percorso) con i tuoi.
3) elimina il tag di chiusura dei img (non serve)

ps. se vuoi posta pure tutto il file html cosi vediamo cosa si puo fare.

**Sonikag** · 16-03-2021, 17:01

Cosa intendi con il punto 2? quelli che ho postato sono i percorsi corretti delle immagini che manda la telecamera.

codice:

<html>
<head> 
<title></title>  
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap" rel="stylesheet"> 
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href='http://fonts.googleapis.com/css?family=Raleway:300,400,500|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

    
    <link href="css/layout.php" rel="stylesheet" />
    <link href="css/responsive.css" rel="stylesheet" />
    <link href="css/menu.php" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
   <!-- Mobile viewport optimized: j.mp/bplateviewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /><!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"> </script>

<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.min.js">
</script>


<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script>
<!--//--><![CDATA[//><!--
 $(document).ready(function(){   
		//When btn is clicked
		$(".btn-responsive-menu").click(function() {
			$("#navigation").toggleClass("show");
		});
    
    });
//--><!]]>
</script>
 </head>
<div id="wrapper">
    <header id="header">   <div class='logout'><a href="home.php?logout"><i class="material-icons logoutbtn">exit_to_app</i><br>Esci</a></div> 

        <div id="site-title"><a href='home.php'><img src='img/logo.png'>Telecamere</a></div>

        <div class="btn-responsive-menu">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </div>
     
    </header>    
<nav id="navigation" role="navigation">
    
    
    <ul>
 <li><a href='home.php'>Home</a></li>
 <li><a href='rstp.php'>Rstp</a></li>
 <li><a href='ref.php'>Ref</a></li>
 <li><a href='collegamenti.php'>Collegamenti</a></li>
</ul>
    
                 

	</nav>
<div id="main">



 

<script>
const img1 = document.getElementById('img1')
const img2 = document.getElementById('img2')
    setInterval(()=>{
        img1.setAttribute('src','picture.jpg')
        img2.setAttribute('src','picture.jpg')
        console.log('caricata')
    },1000);

</script>

<h4>Cancello 1</h4>
<img src="http://192.168.1.216:8080/picture.jpg" class='imm' id="img1"/>
<hr>
<h4>Cancello 2</h4>
<img src="http://192.168.1.215:8080/picture.jpg" class='imm' id='img2'/>


</div>


<div id="footer"><a href="#"><i class="large2 material-icons">keyboard_arrow_up</i></a></div>
</div>

</body>
</html>

**Sonikag** · 16-03-2021, 17:04

Cosa intendi con il punto 2? quelli che ho postato sono i percorsi corretti delle immagini che manda la telecamera.

codice:

<html>
<head> 
<title></title>  
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap" rel="stylesheet"> 
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href='http://fonts.googleapis.com/css?family=Raleway:300,400,500|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

    
    <link href="css/layout.php" rel="stylesheet" />
    <link href="css/responsive.css" rel="stylesheet" />
    <link href="css/menu.php" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
   <!-- Mobile viewport optimized: j.mp/bplateviewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /><!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"> </script>

<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.min.js">
</script>


<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script>
<!--//--><=!=[=C=D=A=T=A=[//><!--
 $(document).ready(function(){   
        //When btn is clicked
        $(".btn-responsive-menu").click(function() {
            $("#navigation").toggleClass("show");
        });
    
    });
//--><!]=]=>
</script>
 </head>
<div id="wrapper">
    <header id="header">   <div class='logout'><a href="home.php?logout"><i class="material-icons logoutbtn">exit_to_app</i><br>Esci</a></div> 

        <div id="site-title"><a href='home.php'><img src='img/logo.png'>Telecamere</a></div>

        <div class="btn-responsive-menu">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </div>
     
    </header>    
<nav id="navigation" role="navigation">
    
    
    <ul>
 <li><a href='home.php'>Home</a></li>
 <li><a href='rstp.php'>Rstp</a></li>
 <li><a href='ref.php'>Ref</a></li>
 <li><a href='collegamenti.php'>Collegamenti</a></li>
</ul>
    
                 

    </nav>
<div id="main">



 

<script>
const img1 = document.getElementById('img1')
const img2 = document.getElementById('img2')
    setInterval(()=>{
        img1.setAttribute('src','picture.jpg')
        img2.setAttribute('src','picture.jpg')
        console.log('caricata')
    },1000);

</script>

<h4>Cancello 1</h4>
<img src="http://192.168.1.216:8080/picture.jpg" class='imm' id="img1"/>
<hr>
<h4>Cancello 2</h4>
<img src="http://192.168.1.215:8080/picture.jpg" class='imm' id='img2'/>


</div>


<div id="footer"><a href="#"><i class="large2 material-icons">keyboard_arrow_up</i></a></div>
</div>

</body>
</html>

**ninja72** · 16-03-2021, 17:45

con il punto 2 intendevo quello che hai fatto ora e non prima, avevi lasciato i riferimenti img1.jpg e img2.jpg.

prova a spostare lo script come ti avavo detto, esempio:

codice:

<h4>Cancello 1</h4>
<img src="http://192.168.1.216:8080/picture.jpg" class='imm' id="img1" />
<hr>
<h4>Cancello 2</h4>
<img src="http://192.168.1.215:8080/picture.jpg" class='imm' id='img2' />

</div>

<div id="footer"><a href="#"><i class="large2 material-icons">keyboard_arrow_up</i></a></div>
</div>
<script>
    const img1 = document.getElementById('img1')
    const img2 = document.getElementById('img2')
    setInterval(() => {
        img1.setAttribute('src', 'picture.jpg')
        img2.setAttribute('src', 'picture.jpg')
        console.log('caricata')
    }, 1000);

</script>
</body>

</html>

Inoltre potresti verificare dalla console di sviluppo se consolo.log('caricata) viene eseguito ripetutamente o se ci sia qualche sorta di blocco. (ctrl+shift+i e vai su console)

Discussione: Aggiornamento immagine

Strumenti discussione

Ricerca discussione

Visualizza

Aggiornamento immagine

Tag per questa discussione

Permessi di invio