Oppdatere x antall bilder ved tidsintervall

[Svish]

Jeg har 1-x bilder på en side. Tenker å merke dem med class="needs_refresh" eller noe sånt, og vil da altså ende opp med et ukjent antall

<img src="image.jsp?id=x" width="160" height="120" class="needs_refresh" />

hvor x er et tall

 

Jeg trenger at disse oppdaterer seg hvert n'te sekund. Bildenes src vil være den samme, men de må altså lastes på nytt av browseren. Grunnen er at disse bildene vil erstattes ved gjevne mellomrom av et program i bakkant. Websiden vet ikke når dette skjer, så det må gjøres ved gjevne mellomrom.

 

Noen som vet hvordan jeg (helst så enkelt som mulig) kan få til dette?

[radix]

Se om ikke dette kan få deg på rette veien:

function kjoresOnload(){ //kjør onload
var bilder = document.getElementsByTagName("img"); //alle bilder i dok
//eventuelt var bilder = document.images;
var lengdemellomrefresh = 60000; //60k ms = 60s = 1 minutt
for(var i=0; i<ant; i++){
 if(bilder[i].className == "needs_refresh"){
 	setInterval(refr, lengdemellomrefresh);
 }
}
}
function refr(bilde){ 
/*
legger på &[random tall] på sti til bilde - omgår cache i nettleseren
*/
bilde.src += "&" + Math.round(Math.random()*10); 
}

Endret 30. april 2007 av radix

[Svish]

det ser jo brukbart ut. Men vil ikke da denne bilde.src bli lenger og lenger liksom?

 

hvis jeg nå bruker tilfeldige 2 sifrede tall så vil det jo src bli

 

image.jsp?id=2

image.jsp?id=2&23

image.jsp?id=2&2365

image.jsp?id=2&236512

image.jsp?id=2&23651278

 

osv osv.Eller er bilde.src hele tiden den originale sourcen?

 

Kan scriptet startes på noen andre måter enn onLoad i body? fra en script tag i body eller noe sånt? eventuelt onLoad på bildet selv eller noe sånt? Må kanskje justere litt i scriptet da..

[radix]

img src blir lengre og lengre ja, men det skal ikke være noe problem. Jeg tror også det skal gå an å sende en HTTP-header fra server som tvinger nettleser til å hente inn bildet på ny, men dette er klart den enkleste løsningen.

 

Du kan kjøre scriptet når/hvor du vil, bare pass på at "kjoresOnload"-funksjonen ikke kjøres mer enn en gang, da dette vil føre til at hvert bilde får flere "oppdateringsintervall" knyttet til seg.

 

Du må nok tilpasse scriptet litt ja. Gi beskjed dersom du har noen problemer med implementering av koden.

[Svish]

cool. will try it out! thank you

[Svish]

hm, fikk det ikke til å funke helt. Men etter litt tweaking og styr, så endte jeg opp med dette som funker:

<script type="text/javascript">
function refreshIt(first) 
{
  if (!document.images) return;
     for(var i=0; i<document.images.length; i++)
     {
         if(document.images[i].className=="refresh") {
            if(first==0)
      document.images[i].src = document.images[i].src + Math.floor(Math.random()*10);
            else
                 document.images[i].src = document.images[i].src + "&" + Math.floor(Math.random()*10);
         }
     }
     setTimeout('refreshIt(0)', 7*1000);  
}
refreshIt(1);
</script>

[Svish]

er det noen måte å få browseren til å laste det nye bildet ferdig, før det erstatter det gamle liksom? må kanskje inn med ajax å greier da?

[Gjest Slettet+142]

må nok ha ajax, ja

[radix]

Skal ikke trenge noe "Ajax"-greier..

 

Du kan legge et onload-event på hvert bilde.

 

f.eks. <img src="sti/til/bildet.gif" onload="ferdig(this)" />

function ferdig(bilde){ 
//setter property på bildeobjektet når det er lastet
bilde.lastet = true;
}

 

Det kan være det er en property allerede på bilder som sier om de er ferdiglastet, men jeg vet ikke om denne heter det samme på tvers av nettlesere.

 

I refreshIt må du nå ta hensyn til om bildet er ferdig lastet eller ikke.

 

..
if( document.images[i].lastet ) { /* sett lastet-property til false, hent neste */}
..

Endret 8. mai 2007 av radix

[Kagee]

Du kan mellomlaste det nye bildet i en annen img-tag, som igjen er skjult av f.eks en div med visible=hidden - og så kjøre onload på det for å bytte ut orginalbildet

[Svish]

har du et lite eksempel?

[radix]

Siden du skulle refreshe bilder fra serveren, er kanskje dette den kjappeste løsningen?

 

<img src="blabla" onload="replaceMe(this)">

 

function replaceMe(img){
var delay = 100000; //millisekund før bildet skal refreshed
//denne må ligge inni replaceMe for å få tak i img ved setTimeout
function replaceImgSrc(){
 /*
 legger bare på & på første "refresh"
 dersom du kjører flere parameter til server, 
 må denne skrives litt om
 */
 img.src += (img.src.indexOf('&')==-1) ? "&" + rand(): rand();
 //legg inn en alert(img.src) for å teste at det virker
}
setTimeout(replaceImgSrc,delay)
}
//genererer et tall mellom 0 og 9
function rand(){return Math.round(Math.random()*10)}

 

Eksempel første gang src: image.jsp?id=x&2

Andre gang: image.jsp?id=x&21

osv..

Endret 9. mai 2007 av radix

[Svish]

Det har fungert delvis, disse forslagene. Men jeg tror jeg har funnet et problem. Og det er når siden har vært oppe i lengre tid. I hvert fall i FireFox, så begynner det å skje merkelige ting etter hvert. Er det ikke en grense på hvor lang en url kan være eller noe sånt?

[radix]

I IE tror jeg det er ~1000 tegn. I Opera og FF er det mer, men jeg er ikke sikker på hvor mange. Normalt sett vil vel folk ikke ha oppe siden så lenge at de kommer opp i denne lengden..?

 

Hva er det merkelige som skjer?

[Svish]

det merkelige som skjer er at den i blant etter en stund ender opp med 2 eller 3 bilder som den svapper i mellom. Bildene er fra webkameraer, så normalt sett er det faktisk muligheter for at folk kan ha den oppe ganske lenge, hehe.

[Svish]

det merkelige som skjer er at den i blant etter en stund ender opp med 2 eller 3 bilder som den svapper i mellom. Bildene er fra webkameraer, så normalt sett er det faktisk muligheter for at folk kan ha den oppe ganske lenge, hehe.

[radix]

Har du en eksempelside?

[Svish]

nei dessverre. Er programmert i JSP og har ingen JSP server å legge det ut på...

 

Men uansett så har jeg fikset det nå. Droppet å bruke javascript til å skifte ut bildene med. Bruker nå heller AJAX til å skifte ut hele bildetaggene. JSPsiden som tar hånd om AJAX requesten lager bilder med srd="image.jsp?id=i&rand=new java.rmi.server.UID() + Math.random()". Det blir naturligvis litt mer overhead ved å gjøre det sånn, men ikke så ekstremt mye. Og det skal uansett ikke være en side mange skal besøke så båndbredde har ikke SÅ mye å si. Det viktigste er at bildene faktisk byttes ut. Og det gjør de nå.

 

Et annet problem jeg har oppdaget nå da, er at browseren cacher alle bildene, hehe. Og det er jo ikke noe jeg får gjort noe med egentlig.. Lar man firefox eller opera stå å vise den siden en stund spiser den sakte men sikkert opp rammen, hehe. Men skulle ikke de linjene jeg har nedenfor her gjøre så den IKKE cacher? mulig de bare driter i det og gjør det allikevel..

	response.setHeader("Pragma","no-cache"); //HTTP 1.0
response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
response.setDateHeader("Expires", 0); //prevents caching at the proxy server
response.setHeader("Cache-Control", "private"); // HTTP 1.1 
response.setHeader("Cache-Control", "no-store"); // HTTP 1.1 
response.setHeader("Cache-Control", "max-stale=0"); // HTTP 1.1

[Kagee]

I PHP (ja, jeg vet dette ikke er PHP), når man skriver en header, skreves den gamle over - dvs at med koden over sender du bare "Pragma","no-cache" og "Cache-Control", "max-stale=0".

 

I PHP ville vi gjort det slik;

<?php
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
?>

 

Diskusjon.no har noe som dette:

header("Expires: Thu, 19 Nov 1981 08:52:00 GMT"); 
header("Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0");  
header("Pragma: no-cache"); 

Endret 15. mai 2007 av Kagee