[JS] Image preload in cache?

[André]

code:

Img = new Image();
Img.src = "kunstwerken/" + pad;

Bovenstaand script gebruik ik om Img.width en Img.height uit te lezen. Werkt prima, maar nu het volgende:

Als ik het plaatje weggooi houd IE de hoogte en breedte in het geheugen. Want als ik het plaatje weer inlaad met bovenstaand script kan hij het plaatje niet vinden, en toch weet hij nog de hoogte en de breedte. En ja, ik heb mijn tijdelijke internet bestanden weggegooid.

Aan het einde van dat script staat Img = null; maar dat helpt ook niet. Het rare is trouwens dat dat script 15 keer op 1 pagina gebruikt word, dus het is niet zo dat hij voor 1 plaatje gebruikt word en die opslaat.

Houd IE dit misschien in het geheugen en is het het algemeen bekende slechte geheugen management van IE, of doe ik iets fout.

[crisp]

Een object naar null laten verwijzen delete in IE niet de onderliggende properties van het object.
Probeer eens het volgende ipv Img = null:

code:

delete Img;

[drm]

da's op z'n minst vreemd te noemen. Heb je een linkje?

[André]

delete Img; werkt niet.

En ik heb geen linkje (intranet applicatie) maar hier even de uitgebreide code:

code:

  function Plaatje(pad)
  {
    Formaat = 70;
    Img = new Image();
    
    Img.src = "kunstwerken/" + pad;
      
    if (Img.width >= Img.height)
    {
      scale = Formaat / Img.width;
      hoogte = Img.height * scale;
      breedte = Formaat;
    }
    else
    {
      scale = Formaat / Img.height;
      breedte = Img.width * scale;
      hoogte = Formaat;
    }
    if (Img.fileUpdatedDate == "")
    {
      hoogte = 0;
      breedte = Formaat;
    }
    document.write ("[img]'"[/img]");
      delete Img;
  }

Deze functie word aangeroepen vanuit de pagina, nu heb een paar jpg's verwijderdt maar IE houd de breedte en hoogte toch vast. Want als je goed naar het script kijkt moet hij als de fileUpdatedDate "" is (dus niet bestaat) het plaatje op width=70 en height=0 zetten.

Ik zie nu dat hij de fileUpdatedDate ook vasthoud ergens in het geheugen. Dus op een of andere manier word het Img object gecached, ook al verander dje 15 keer per pagina de Img.src.

[crisp]

Het lijkt erop dat IE dus inderdaad de properties van het plaatje cached; kijkt of het plaatje nog bestaat, en vervolgens concludeerd dat het plaatje niet bestaat (kruisje), maar toch de gecachede properties teruggeeft.
In dat geval zou een onError event op het Img object getriggered kunnen worden; probeer daar eens iets mee te doen...

[BtM909]

misschien is het niks, maar ik las heel snel iets bij Netschaap's What's new in JavaScript 1.2 over deleten van object properties.

Misschien heb je hier wat aan...

[André]

BtM909 schreef op 14 augustus 2002 @ 10:14:
misschien is het niks, maar ik las heel snel iets bij Netschaap's What's new in JavaScript 1.2 over deleten van object properties.

Misschien heb je hier wat aan...

T'is eigenlijk alleen voor IE5+ (intranet).

Ik heb ook al geprobeerd om met Img.complete iets te maken, maar dat werkt ook niet.

Ik ga nu even bezig met onerror.

[André]

Oke, met onerror kan ik in ieder geval ervoor zorgen dat als het plaatje niet bestaat dat hij wat anders neerzet.

Maar nu blijft het probleem dat hij dingen cached, want als het plaatje niet bestaat is de width 0, maar als daarna het plaatje wel bestaat blijft de width 0. En dat kan niet want ik ben de juiste width nodig om het plaatje te kunnen centreren.

* André heeft een major IE BUG/FEATURE gevonden

[BtM909]

Yogho schreef op 14 augustus 2002 @ 10:25:


* BtM909 heeft een major IE BUG/FEATURE gevonden

Yogho is now known as an official Microsoft Bughunter.


delete img.heigth;
delete img.width;

werkt ook niet?

[ Voor 0% gewijzigd door BtM909 op 14-08-2002 10:36 . Reden: typo's ]

[André]

BtM909 schreef op 14 augustus 2002 @ 10:33:
[...]


Yogho is now known as an official Microsoft Bughunter.


delete img.heigth;
delete img.width;

werkt ook niet?

Nope, ik ga wel wat anders proberen, de pagina word met asp uitgepoept dus ik heb nog wat andere mogelijkheden. En met wat meer functionaliteit achter het onerror event kom ik ook een heel eind.

[oh,when?]

kzou zo ook geen reden weten voor deze behavior, maar als hubba-bubba oplossing zou ik gewoon elke keer een random naam verzinnen voor het image object

[drm]

ik denk dat je er vanaf bent als je ipv. document.write (waarmee je dus IE de opdracht geeft het img object nog een keer te renderen) het Img object gewoon aan je document tree toevoegt met appendChild, nadat je de waarden van Img.height en Img.width gemanipuleerd hebt.

try it

[LuCarD]

Wat nou als je Img overschrijft met een new Image?

Eventueel new Image(0,0);?

[Morrar]

Misschien een vreemde suggestie, maar je zou eens wat "var" statements kunnen toevoegen... Alle variabelen zijn nu global gedefinieerd, waardoor er op die manier misschien iets blijft hangen (als de src zetten niet lukt van Img laat hij wellicht de overige props staan?) in het geheugen. Met een paar var's erbij zou je verwachten dat na het uitvoeren van de funtie tenminste alles weggedonderd wordt... Tis maar een suggestie.

[BtM909]

Morrar schreef op 15 augustus 2002 @ 03:06:
Misschien een vreemde suggestie, maar je zou eens wat "var" statements kunnen toevoegen... Alle variabelen zijn nu global gedefinieerd, waardoor er op die manier misschien iets blijft hangen (als de src zetten niet lukt van Img laat hij wellicht de overige props staan?) in het geheugen. Met een paar var's erbij zou je verwachten dat na het uitvoeren van de funtie tenminste alles weggedonderd wordt... Tis maar een suggestie.

Raar... De variabelen zijn toch gedefinieerd IN de functie. Waarom zouden ze global zijn? Elke keer als ik die functie aanroep, moeten de variabelen leeg zijn...

[crisp]

BtM909 schreef op 15 augustus 2002 @ 09:55:
[...]


Raar... De variabelen zijn toch gedefinieerd IN de functie. Waarom zouden ze global zijn? Elke keer als ik die functie aanroep, moeten de variabelen leeg zijn...

Een variabele gedefinieerd binnen een functie zonder 'var' wordt automagisch global...

[SchizoDuckie]

Probeer het anders eens zo, misschien dat het helpt:

PHP:

Img = new Image();
Img.src = "kunstwerken/" + pad + '?randomnummer9248273472374blabla';

Da's de manier om em niet te laten cachen. Ik weet alleen niet of het ook de width en height weer reset...

[BtM909]

crisp schreef op 15 augustus 2002 @ 10:02:
[...]

Een variabele gedefinieerd binnen een functie zonder 'var' wordt automagisch global...

OMG --> * BtM909 moet weer eens 's ochtends koffie drinken... Dit was toch errug basic. BtM909 zegt tot 14:00 uur niks meer

[André]

Papa Eend schreef op 15 augustus 2002 @ 11:20:
Probeer het anders eens zo, misschien dat het helpt:

PHP:

Img = new Image();
Img.src = "kunstwerken/" + pad + '?randomnummer9248273472374blabla';

Da's de manier om em niet te laten cachen. Ik weet alleen niet of het ook de width en height weer reset...

Het plaatje word inderdaad niet gecached, maar de width en de height worden niet gereset.

BtM909 schreef op 15 augustus 2002 @ 11:49:
[...]
OMG --> * BtM909 moet weer eens 's ochtends koffie drinken... Dit was toch errug basic. BtM909 zegt tot 14:00 uur niks meer

Dit is niet basic, want of het nu locals of globals zijn maakt niet uit (ja ik heb het wel geprobeerd).

Ik denk dat dit een beste IE bug is. Maar is er trouwens een andere oplossing om de breedte en hoogte van de images op te vragen? Want het is voor een site die van alle kunstwerken automatisch thumbnails maakt met de juiste aspect ratio.

[BtM909]

basic sloeg eigenlijk op het feit tussen het verschil van local en global variabelen...

_{* BtM909 heeft trouwens wel pijn aan z'n hoofd gekregen van al dat gebonk}

[André]

Even een kick na een tijdje. Ik heb een oplossing gevonden voor het probleem met het cachen van plaatjes. De methode die ik eerste gebruikte zou moeten werken maar oke.

Dit is de oplossing die ik nu gebruik en dan werkt het perfect:

code:

  Kunstwerken = new Array()

  function MaakPlaatje(pad)
  {
    Kunstwerken[Kunstwerken.length] = new ObjPlaatje(pad);
  }

  function ObjPlaatje(pad)
  {
    this.image = new Image();
    this.image.src = "kunstwerken/" + pad;
  }

Ik hou nu een array van alle image objecten bij, en nu gaat het goed. Hij houd de width en height niet meer vast.

[ Voor 0% gewijzigd door André op 20-08-2002 08:10 . Reden: typo ]