[JS] memory leak, hoe te dichten?

[BasieP]

beste mensen en mensinnen...

ik ben bezig met een siteje om wat webcams op te laten zien. dit zijn gewoon .jpg files, en deze worden gerefreshed.

nu doe ik dit refreshen dmv javascript, omdat ik dan niet de hele pagina maar alleen het plaatje hoef te refreshen.

ik gebruik daar deze functie voor:

JavaScript:

 function refreshcam()
 {
    tmpImage = new Image()
    tmpImage.src = 'plaatje.jpg';

    document.images.webcam.src = tmpImage.src;
    delete tmpImage;

    setTimeout("refreshcam()", 500);
 }

nu werkte dit niet niet, omdat de browser de plaatjes cached, en daarom ik maar 1 plaatje zie, en er dus niks gereload word.

daarom heb ik als tip gehad om het zo te doen

JavaScript:

 function refreshcam()
 {
    var now = new Date();

    tmpImage = new Image()
    tmpImage.src = 'plaatje.jpg?' + now.getTime();

    document.images.webcam.src = tmpImage.src;
    delete tmpImage;

    delete now;

    setTimeout("refreshcam()", 500);
 }

dit werkt WEL, maar toen kreeg ik een memoryleak. alle plaatjes blijven gecached, ook na de 'delete'
zo zit mijn lieve FF na een kwartiertje op 400MB ofzo.. niet echt liev dus.

nu vroeg ik me af hoe ik dit op zou kunnen lossen.

[André]

Als je deze buiten de functie zet?

code:

tmpImage = new Image()

En delete is IE only, probeer de variabelen eens op null te zetten.

[ Voor 32% gewijzigd door André op 05-07-2005 17:03 ]

[Gert]

Is dat bij alle browsers zo? Lijkt me eerder een bug in FF.

[.oisyn]

HTML, CSS, JavaScript, Flash en Director topics *12-05*

Programming & Webscripting -> Webdesign & Graphics

[momania]

Doe je nu niet steeds een recursive call

Dus bij iedere timeout, roep je een keer extra refreshcam() aan.

Je moet gewoon volgens mij alleen ergens 'setTimeout("refreshcam()", 500);' aanroepen en dat niet binnen die method nog eens doen..

[André]

momania schreef op dinsdag 05 juli 2005 @ 17:12:
Doe je nu niet steeds een recursive call

Dus bij iedere timeout, roep je een keer extra refreshcam() aan.

Je moet gewoon volgens mij alleen ergens 'setTimeout("refreshcam()", 500);' aanroepen en dat niet binnen die method nog eens doen..

Nee, dit kan prima zo, het is ook niet recursief. Want de functie wacht niet op de uitvoering van de timeout maar gaat gewoon verder en loopt dus af. Wat jij bedoeld kan wel maar doe je met setInterval

[BasieP]

André schreef op dinsdag 05 juli 2005 @ 17:01:
Als je deze buiten de functie zet?

code:

tmpImage = new Image()

En delete is IE only, probeer de variabelen eens op null te zetten.

tnx het werkt nu

waneer ik het aanmaken van de image buiten de functie doe dan zie ik maar 1 pic (refreshed niet)

het op NULL zetten werkte in princiepe, maar heb het achteraf toch gedaan door direct de src van de image te veranderen en dan de .reload aan te roepen

[momania]

André schreef op dinsdag 05 juli 2005 @ 17:15:
[...]
Wat jij bedoeld kan wel maar doe je met setInterval

Oh ja, dat was het... even door elkaar gehaald

[crisp]

delete is niet IE-only, maar blijkbaar ruimt IE daarmee de referentie toch niet op.
Overigens is het raadzaam variabelen in functie-scope te houden door ze te declareren met het 'var' keyword; deze worden als het goed is sowieso destroyed na het uitvoeren van de functie.

Ik snap soweiso niet wat het nut is van het opslaan in een JS image object, en meteen daarna dezelfde src property door te geven aan je HTML image-object. Je JS image object is dan namelijk nog niet eens klaar met laden, dus van preloaden is hier geen sprake.
Hiermee bereik je dus precies hetzelfde effect:

JavaScript:

function refreshcam()
{
    document.images['webcam'].src = 'plaatje.jpg?' + new Date().getTime();
    setTimeout('refreshcam()', 500);
}

[BasieP]

crisp schreef op dinsdag 05 juli 2005 @ 23:31:
Ik snap soweiso niet wat het nut is van het opslaan in een JS image object, en meteen daarna dezelfde src property door te geven aan je HTML image-object. Je JS image object is dan namelijk nog niet eens klaar met laden, dus van preloaden is hier geen sprake.
Hiermee bereik je dus precies hetzelfde effect:

JavaScript:

function refreshcam()
{
    document.images['webcam'].src = 'plaatje.jpg?' + new Date().getTime();
    setTimeout('refreshcam()', 500);
}

dat heb ik nu ook ongeveer.
het idee achter het in een var zetten was, dat wanneer ik in de functie kwam het plaatje geladen zou worden in die var.

daarna zou ik een soort van
while (tempPlaatje.complete) { }
doen, en dan als ie geload was vervangen van het echte plaatje door het tijdelijke plaatje.

maarrrr. op de een of andere manier blijft ie OF eeuwig in die loop, of hij blijft er zo lang in, dat de andere setTimeout er weer aankomt of iets dergelijks.. iig hangt ie telkens
maargoed das een ander verhaal eigenlijk

[ Voor 13% gewijzigd door BasieP op 06-07-2005 01:07 ]

[Verwijderd]

Het geheugen vrijgeven zal niet lukken met een image instantie, en de loop die je krijgt is waarschijnlijk doordat de image niet voldoende tijd krijgt om in te laden. hij heeft namelijk maar 500 ms de tijd om zijn taak te doen.

Je zult dus moeten controleren of de status van de nieuwe image ervan op ingeladen staat mbv readyState, of maar die is wat ranziger de setTimeout functie pas aanroepen in de onload van de image.

[ Voor 12% gewijzigd door Verwijderd op 06-07-2005 01:13 ]

[BasieP]

Verwijderd schreef op woensdag 06 juli 2005 @ 01:12:
Het geheugen vrijgeven zal niet lukken met een image instantie, en de loop die je krijgt is waarschijnlijk doordat de image niet voldoende tijd krijgt om in te laden. hij heeft namelijk maar 500 ms de tijd om zijn taak te doen.

Je zult dus moeten controleren of de status van de nieuwe image ervan op ingeladen staat mbv readyState, of maar die is wat ranziger de setTimeout functie pas aanroepen in de onload van de image.

vandaar dus mijn idee om het via zo'n while loop te doen (zie ^^)
wat ik me daarbij afvroeg, in php kan je dmv 'getimagesize' of iets dergelijks kijken of je pic wel geladen KAN worden.
als er in javascript ook zoiets is, dan kan ik wanneer de pic niet geladen kan worden die timeout op 10 seconds gooien ofzo
scheelt veel load

[ Voor 21% gewijzigd door BasieP op 06-07-2005 01:18 ]

[Verwijderd]

Je hebt dan dus de ook nog de mogelijkheid van de onload op de image. Wat je zelf het beste vind, die readyState is ook solide genoeg.

[img]"plaatje.gif"[/img]

function announceIMGOnloadEvent(oImg){
oImg.setTimeout(function(){reloadImg(oImg)},500);
}
function reloadImg(oImg){
oImg.src = 'plaatje.jpg?' + now.getTime();
}

[Verwijderd]

BasieP schreef op woensdag 06 juli 2005 @ 01:16:
[...]

vandaar dus mijn idee om het via zo'n while loop te doen (zie ^^)
wat ik me daarbij afvroeg, in php kan je dmv 'getimagesize' of iets dergelijks kijken of je pic wel geladen KAN worden.
als er in javascript ook zoiets is, dan kan ik wanneer de pic niet geladen kan worden die timeout op 10 seconds gooien ofzo
scheelt veel load

Hoe bedoel je niet geladen worden? In principe zou je pas een afbeelding moeten gaan laden als de vorige afbeelding het onload event heeft getriggerd, of als de readyState van het img element 'complete' aangeeft. Zo loop je nooit tegen het probleem aan dat een image niet genoeg tijd krijgt.

[ Voor 8% gewijzigd door Verwijderd op 06-07-2005 01:26 ]

[BasieP]

ik bedoelde zegmaar dat als je een 404 heb, dat je niet zit te refreshen elke keer als ie net klaar is met loaden, maar dat je dan iets van 30 secs wacht voor de volgende keer dat je het probeerd.

verder ga ik nu jouw idee gebruiken met die onload van de image.. dit kan natuurlijk ook dmv de .complete maar op de een of andere manier gaat dat niet echt lekker hier.

mag ik nog vragen waarom jij hier een functie maakt binnen de settimeout?

oImg.setTimeout(function() { reloadImg(oImg) },500);

edit:
mm mijn plaatjes laden nu een keer, en refreshen niet..
ik zal eens met alerts achter komen waar hij fout gaat mom
typo
werkt als een tiet..
ik zal eens zoeken naar een manier om te kijken of een plaatje een 404 is of een timeout geeft oid

[ Voor 22% gewijzigd door BasieP op 06-07-2005 01:52 ]

[Verwijderd]

Die is niet nodig

[ Voor 75% gewijzigd door Verwijderd op 06-07-2005 02:22 ]

[djluc]

ik zal eens zoeken naar een manier om te kijken of een plaatje een 404 is of een timeout geeft oid

Je kan de onerror event afvangen met javascript.

[Verwijderd]

djluc schreef op woensdag 06 juli 2005 @ 06:29:
[...]
Je kan de onerror event afvangen met javascript.

Mozilla kent het onerror event niet meer...

[crisp]

Verwijderd schreef op woensdag 06 juli 2005 @ 10:47:
[...]


Mozilla kent het onerror event niet meer...

Jawel, alleen als je vanuit je filesystem test lijkt Moz altijd onload te triggeren, ook als het plaatje niet bestaat.