[JS/DOM] image swap werkt niet in IE met caching uit

[Verwijderd]

Na veel proberen is het me niet gelukt een image te veranderen met javascript als je op een link in de pagina klikt. Mijn functie werkte als een zonnetje in alle browsers behalve in IE (5/6) als de caching van IE op de setting "bij elk bezoek aan een pagina" stond ingesteld.

de functie maakte gebruik van het src attribuut van een plaatje dat ik vijf verschillende waardes kon meegeven door middel van vijf verschillende linkjes op dezelfde pagina. de js zag er dus ongeveer als volgt uit:

code:

img['plaatje01'] = 'bla.jpg';
img['plaatje02'] = 'bla2.jpg';

function change (name) {
document.images['plaatje'].src = img[name].src
}

Alleen in IE werd wel het standaard plaatje getoond maar als je klikte verdween het plaatje.

Vervolgens heb ik hetzelfde effect geprobeerd te bereiken door onclick de class van de div, met daarin het plaatje, te veranderen met voor iedere class een ander achtergrond plaatje. maar ook dit werkte weer alleen niet in IE met de cache setting op deze bepaalde stand.

mijn conclusie: als je Internet Explorer caching op controleren "bij elk bezoek aan een pagina" zet kan IE niks meer uit de cache lezen maar hij kijkt ook niet meer of hij het plaatje wel van de server kan halen als hij het niet in de cache vindt. Dit is dus een bug waar geen oplossing voor is. Heb ik gelijk of zie ik iets over het hoofd?

p.s. ik heb het uiteindelijk opgelost door ieder plaatje een eigen div te geven op de pagina en de display waarde te veranderen voor het plaatje wat getoond diende te worden.

[BtM909]

Verdween het plaatje of ging hij hem opnieuw laden?

Daarnaast is dit niet echt DOM methode proggen

[Verwijderd]

Het plaatje "verdween" inderdaad. IE vervangt het bestaande plaatje (want hij ziet wel de src waarde) maar kan het plaatje vervolgens niet vinden (geen errors overigens)

De tweede methode die ik probeerde was wel degelijk DOM, maar is inderdaad niet zo relevant voor deze vraag.

[André]

Probeer dit eens:

code:

img['plaatje01'] = new Image();
img['plaatje01'].src = 'bla.jpg';
img['plaatje02'] = new Image();
img['plaatje02'].src = 'bla2.jpg';

function change (name) {
document.images['plaatje'].src = img[name].src;

Dan worden de plaatjes niet iedere keer opnieuw opgehaald maar in het geheugen gehouden.

[Verwijderd]

ah ja dat was niet helemaal duidelijk wellicht maar ik maakte eerst de objectjes aan inderdaad. Met deze setting van IE worden plaatjes zowiezo niet in het geheugen opgeslagen heb ik het idee.

Ik maak wel even een demotje anders dat is wellicht handiger... (moment)

[André]

Als het echt niet werkt kun je ook met layers gaan werken waarvan je de z-index of display veranderd, op die manier hoef je plaatjes niet opnieuw in te laden.

[crisp]

IE en caching uit gaat gewoon niet goed samen met DHTML
De methode van André zou wel goed moeten werken, maar als je zeer veel imageswaps doet op je pagina gaat je webserver het zwaar krijgen als er zo'n malloot langskomt met caching uit...

[Clay]

de js zag er dus ongeveer als volgt uit:

code:

img['plaatje01'] = 'bla.jpg';
img['plaatje02'] = 'bla2.jpg';

function change (name) {
document.images['plaatje'].src = img[name].src
}

Alleen in IE werd wel het standaard plaatje getoond maar als je klikte verdween het plaatje.

Da's ook redelijk logisch je stopt je src direct in de array positie, en gaat dan in de functie naar een .src property van die array positie vragen (wat een string is). Die bestaat natuurlijk niet zo.

[Verwijderd]

okok, bij deze een demo van het probleem voor we allemaal over de fouten in de pseudo code gaan struikelen

http://www.tijs.org/codebin/IE_cache_bug/

open met IE en zet je cache instelling op bovengenoemde stand en je ziet wat ik bedoel.

het zijn 4 plaatjes trouwens, als IE dat al niet aankan...

[Verwijderd]

André schreef op 20 augustus 2004 @ 12:16:
Als het echt niet werkt kun je ook met layers gaan werken waarvan je de z-index of display veranderd, op die manier hoef je plaatjes niet opnieuw in te laden.

thnx Andre, ik heb het probleem uiteindelijk wel opgelost (zie p.s. van mijn eerste post) maar ik wil weten waarom de eerste oplossing niet werkte dan kan ik daar voortaan rekening mee houden...

[TeeDee]

Verwijderd schreef op 20 augustus 2004 @ 12:42:
okok, bij deze een demo van het probleem voor we allemaal over de fouten in de pseudo code gaan struikelen

offtopic:
Mag ik vragen waar dat over gaat?

offtopic:
Thanks. Mooi schilderij, nu ik de context erbij zie, snap ik wat je bedoel met die linkjes

[ Voor 17% gewijzigd door TeeDee op 20-08-2004 13:18 ]

[Verwijderd]

TeeDee schreef op 20 augustus 2004 @ 12:47:
[...]

offtopic:
Mag ik vragen waar dat over gaat?

natuurlijk. het gaat over de nieuwe aanwinst van het rijks:
http://www.rijksmuseum.nl/steen/

[AkaXakA]

Als je meedere images will 'swappen', kan je dat het beste doen met dit script, aangezien de code die je nu gebruikt zeer snel groeit met elk plaatje die je wilt swappen.

code:

// Script first (?) created by a certain JavaScript god.
// After that, AkaXakA came along and removed some cruft,
// still making sure it worked. Code is now optimised.
// -====================================================-

// This is the variable for your base, include folders and start of the image name.
var base= "img/a-"
var nrm = new Array(); var omo = new Array();

// Here goes the defining part of the image name. Add to this if and 
// when needed, make sure they correspond with the name-tag in your img.
var stuff = new Array('1members','2members');

// Here the script pre-loads all the images.
// The nrm (normal) is for the mouseout/normal state image, the omo
// (OnMouseOver) for the onmouseout image.
// There you add the last part of the image name. Make sure the extention is correct.
if (document.images)
{
    for (i=0;i<stuff.length;i++)    {
        nrm[i] = new Image; nrm[i].src = base + stuff[i] + ".jpg"
        omo[i] = new Image; omo[i].src = base + stuff[i] + "-on.jpg";   }
}

// The functions: first mouseover, then mouseout.
function over(no)
{   document.images[stuff[no]].src = omo[no].src }
function out(no)
{   document.images[stuff[no]].src = nrm[no].src }
 //// html code:
<a  onMouseOver="over(0)" onMouseOut="out(0)">img</a>

Ik hoef niet de text erbij te gaan vertalen, het is wel duidelijk zo toch?

PS. Het lijkt misschien nu veel, maar zonder text erbij is het maar 4 regels...

[ Voor 6% gewijzigd door AkaXakA op 20-08-2004 17:32 ]

[Clay]

* Clay houdt wel van scripts die alles zelf doen.

Op zich kan je het nml ook doen zonder handmatige preloader, zonder names, zonder mouseover attributen; eigenlijk (met een paar conventies) kan je alles uit de markup afleiden. Spreek b.v. met jezelf af dat alle button images beginnen met "but_", en dat de mouseover versie het achtervoegsel "_hi" heeft, dan kan je zo een script schrijven dat onload ff alle images bekijkt, een event aan die images hangt die met but_ beginnen, en ze onmouseover de src geeft van bijna hetzelfde, maar _hi ertussen:

code:

window.onload = function() {
    var imgs = document.getElementsByTagName('img');

    for(var i=0; i<imgs.length; i++) {
        if(/but_/.test(imgs[i].src))
            new ImageSwapper(imgs[i]);
    }
}

function ImageSwapper(img) {
    var loImg, hiImg;
    (loImg = new Image()).src = img.src;
    (hiImg = new Image()).src = img.src.replace(/\.(jpg|gif|png)/, '_hi.$1');

    img.onmouseover = function() {
        this.src = hiImg.src;
    }

    img.onmouseout = function() {
        this.src = loImg.src;
    }
}

Het boeit dan inene - helemaal niets - meer hoeveel images je hieraan hangt, aangezien alles toch vanzelf gaat. Korte schone markup, geen gepiel met preloaders, names en events, hoezee.

code:

<a href="...">[img]"images/but_plaatje1.gif"[/img]</a>
<a href="...">[img]"images/but_plaatje2.gif"[/img]</a>  
etc...

[AkaXakA]

Nog beter clay!

Naast het gewoon met css doen natuurlijk....(vooral als je toch het IE7 script aan je pagina hangt)