[JS] IE en image.onload; synchronisatie probleem?

[guanche]

Hallo, ik ben even bezig geweest met wat een foto album in elkaar te zetten, maar nu loop ik tegen een probleem aan.

Hieronder heb ik de 2 functies gezet waar het fout loopt. Ik wil dat er uit een overzicht geklikt kan worden op een afbeelding, welke dan laad, en groot opent (in de div foto_container). Nu werkt alles prima in FF maar in IE kan ik elke afbeelding slechts 1x aanklikken. Daarna komen er slechts in 1 op 6 klikken eens een plaatje opduiken. Iemand een idee hoe dat kan?

Hij is online te bekijken (met de rest van de code) en ik kan ook vertellen dat een uitgeklede versie van de functionaliteit met slechts deze 2 functies ook niet werken in IE.

alvast bedankt.

JavaScript:

function view_image(image) {
    document.getElementById('foto_container').innerHTML = '<center><img src="loading.gif" /> Bezig met laden...</center>';

    myimage = new Image();
    myimage.src = image;
    myimage.onload = insert_image;
}
function insert_image() {
    image_height = this.height;
    image_width = this.width;
    var image = this.src;
    document.getElementById('foto_container').innerHTML = '<img src="'+image+'" />';
}

[frickY]

Ziet er netjes uit
Maar werkt bij mij in IE6 prima (caching staat uit)

//Edit
Met caching aan (IE zelf laten controleren of er een nieuwe versie is) werkt hij inderdaad niet. Ik vrees dat de onLoad dan niet meer triggered.

Gooi een random waarde achter je image-src aan zodat deze altijd is gewijzigt, of speel wat met de caching headers voor je afbeeldingen, bijv dmv een htaccesje.

[ Voor 67% gewijzigd door frickY op 18-09-2006 19:18 ]

[guanche]

Thanks voor de snelle reactie zeg!

Je hebt inderdaad gelijk.. even de caching uit en het werkt als een trein. Nu wil ik wel weten hoe dit het beste op te lossen is, zodat ik dit script makkelijk kan blijven gebruiken. Het liefst zet ik er geen php voor op dit moment (ookal heb ik dit wel met php in mijn achterhoofd geschreven) om de caching uit te schakelen.

Random string naam zou wel een goede oplossing zijn. Hoe zou jij dat aanpakken?

[DamadmOO]

misschien in je headers meegeven dat je geen caching wilt? dat zou opzich moeten werken.

[orf]

Met javascript kun je prima een parameter meegeven zodat er niet gecached wordt:

JavaScript:

var image = '<img src="' + image + '?' + Math.random() + '" />';

[ Voor 3% gewijzigd door orf op 18-09-2006 20:14 ]

[guanche]

orf schreef op maandag 18 september 2006 @ 20:13:
Met javascript kun je prima een parameter meegeven zodat er niet gecached wordt:

JavaScript:

var image = '<img src="' + image + '?' + Math.random() + '" />';

Ik heb dit nu geprobeerd maar nog zonder resultaat. Ik heb even verder gezocht en kom voornamelijk geluiden tegen die zeggen dat het juist omgekeerd is, dat IE vergeet te cachen. Nu weet ik dat dat hier niet het probleem is, maar toch vreemd.

De oplossing zoals ik van Orf gekregen heb heb ik geimplementeerd op de site. Verder heb ik deze opties nog uitgeprobeerd en weer verwijderd: (de meta tag was zonder hoge verwachtingen btw )

<HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">

PHP:

header("Cache-Control: no-store, no-cache, must-revalidate");  // HTTP/1.1
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");                          // HTTP/1.0

[crisp]

Krijgen je images zelf wel een caching ism expires-header mee?

Verder heb ik in het verleden ook wel problemen gezien met het javascript: pseudo-protocol in een href; probeer dat eens om te zetten naar (nettere) onclick handlers:

JavaScript:

document.getElementById(cell).innerHTML = '<a href="' + img + '" onclick="view_image(this.href);return false;"><img src="album/'+img+'" id="'+imgid+'" class="thumb" /></a>';

en verder: wat doet die loze </a> hier:

JavaScript:

document.getElementById('foto_container').innerHTML = '<img src="'+image+ '?' + Math.random() + '" class="thumb" id="full_foto" /></a>';

?

Ik zou je in ieder geval willen aanraden om voor dergelijke kleine DOM-changes geen innerHTML te gebruiken maar gewoon de DOM methods createElement en appendChild

[guanche]

Ik heb aangepast wat je suggereerde, de onclicks zijn toegevoegd (moet er nog een lege <a> omheenzetten) de loze </a> weggehaald bij foto_container.innerHTML. (dat is er ingeslopen na het lang staren naar de zelfde code)

Verder heb ik de innerHTML vervangen door createElement en appendChild (dit is een eerst voor mij), maar dit wilde niet overal lukken! Ik heb in de code een comment staan: "DE CREATE ELEMENT DIE NIET WERKT".. Als ik hier niet de innerHTML gebruik komt het grote plaatje helemaal niet op.

JavaScript:

    var fotoElement = document.createElement("img");
    fotoElement.setAttribute("src", image+"?"+Math.random());
    fotoElement.setAttribute("src", "loading.gif");
    fotoElement.setAttribute("class", "thumb");

Maar buiten dat zie ik niet wat dit te maken heeft met de cache van Internet Explorer?
Wat bedoel je met: "Krijgen je images zelf wel een caching ism expires-header mee?"

bvd

[crisp]

Een lege <a>? Why? als je de onclick op de image zet heb je geen anchor meer nodig natuurlijk. Je cursor kan je prima met CSS aanpassen.
Pas verder op met setAttribute ism IE: eventhandlers kan je niet op deze manier toekennen en dingen als class vereisen dat je de JS-notatie gebruikt in IE (maar niet in echte browsers) - beter is dan om gewoon zo te doen:

JavaScript:

element.className = 'thumb';

Dit heeft an sich nog niets te maken met de caching van IE maar meer met problemen die IE kan hebben met javascript: pseudo-links (en het daarna niet meer willen inladen van nieuwe images).

Met de headers van je image bedoel ik de HTTP headers die je webserver genereerd voor requests op images. IE vind het fijn als daar een expires header bijzit ism een cache-control header. In apache kan je daarvoor het beste mod_expires gebruiken

[ Voor 35% gewijzigd door crisp op 19-09-2006 12:40 ]

[guanche]

Tjah... ik heb de suggesties gevold en ook de mod_expires, na een paar dagen ziek te zijn geweest , toegepast.

En thuis werkt het netjes, maar nu blijkt dat toevallig op de test server waar dat nu op staat blijkt het geen oplossing te zijn. En zo zou dat nog wel vaker voorkomen bij servers als ik dit stukje code wil gebruiken. Daarbij lijkt het me niet dat dit de eerste keer is dat tegen dit probleem is aangelopen door ontwikkelaars.

PS. Ik heb de innerHtml weer even terug gezet

[ Voor 5% gewijzigd door guanche op 21-09-2006 22:33 ]

[crisp]

JavaScript:

document.getElementById(cell).innerHTML = '<a href="javascript:void(0);"><img src="album/'+img+'" id="'+imgid+'" class="thumb" onclick="view_image(\''+img+'\')" /></a>';

wijzigen in

JavaScript:

document.getElementById(cell).innerHTML = '<img src="album/'+img+'" id="'+imgid+'" class="thumb" onclick="view_image(\''+img+'\')" style="cursor:pointer" />';

vandaag liep ik (of beter gezegd: Femme) ook weer op tegen het probleem met IE dat executie van een javascript: pseudo-protocol alle andere vormen van HTTP-requests in een pagina suspend.

[guanche]

Goedendag.. Ik heb het opgelost, ookal ben ik nu tegen een ander probleem aangelopen.

Ik heb de onclick vervangen zoals voorgesteld:

JavaScript:

    //document.getElementById(cell).innerHTML = '<a href="javascript:void(0);"><img src="album/'+img+'" id="'+imgid+'" class="thumb" onclick="view_image(\''+img+'\')" /></a>';
    document.getElementById(cell).innerHTML = '<img src="album/'+img+'" id="'+imgid+'" class="thumb" onclick="view_image(\''+img+'\')" style="cursor:pointer" />';

Dit werkte redelijk! Hoe het kan dat iets 'meer' werkt als met de andere code snap ik niet helemaal, maar het leek er op dat IE de image 'minder' deed cachen. Maw de afbeeldingen kwamen vaker op.

Nu werkte het nog niet helemaal dus ik ben wat gaan proberen met een variabele in de variabele van new Image();. Dit met (waarschijnlijk een evil use van) eval().. het is als volgt:

JavaScript:

    /* (In de functie view_image() )
    myimage = new Image();
    myimage.src = 'album/'+image;
    myimage.onload = insert_image;
    */
/// VERVANGEN DOOR:
    rand = Math.floor(Math.random()*10000);
    eval("myimage"+rand+"=new Image()");
    eval("myimage"+rand+".src = 'album/'+image");
    eval("myimage"+rand+".onload = insert_image()");

/* (in de functie insert_image() )
    image_height = this.height;
    image_width = this.width;
    var image = this.src;
*/  
/// VERVANGEN DOOR
    image_height = eval("myimage"+rand+".height");
    image_width = eval("myimage"+rand+".width");
    image = eval("myimage"+rand+".src");

Geweldig het werkte!

Maar nu geeft hij bij firefox EN Internet Explorer pas de "image_width" door als de afbeelding al gecached is (/toegevoegd wordt aan de dom)..Dit gedrag is beter te zien in FF en IE geeft zelfs een foutmelding (ik neem aan vanwege dezelfde fout).

Bedankt voor alle hulp tot nu toe! Ik heb al flink wat tijd zitten in het zoeken naar een oplossing van het eval("myimage"+rand+".width") probleem maar kom niet verder. Het kan zijn dat ik in de verkeerde richting zoek en een laatste duw in de goede richting zal nog meer gewaardeerd worden ..

Al met al wel een goede manier op JS te leren

[guanche]

Even voor de vorm maak ik dit bericht compleet, gezien ik de oplossing (niet de mooiste dat geef ik toe) heb gevonden, mbt tot het cache probleem tijdens het gebruik van eval() met image.onload.
Zoals te zien werkt het truukje met een settimeout om de functie heen te plaatsen. Ik heb nog niet veel geexperimenteerd met de timout tijd.

Nu cachen beide IE en FF het netjes

JavaScript:

    rand = Math.floor(Math.random()*10000);
    eval("myimage"+rand+"=new Image()");
    eval("myimage"+rand+".src = 'album/'+image");
    eval("myimage"+rand+".onload = setTimeout(insert_image, 1000)");
    image_height = eval("myimage"+rand+".height");

[crisp]

In plaats van die ranzige eval kan je imo beter gebruik maken van een global array:

JavaScript:

var preload_images = array();

var i = preload_images.length;
preload_images[i] = new Image();
preload_images[i].src = 'album/' + image;
preload_images[i].onload = setTimeout(insert_image, 1000);