[js] preloaden images

[elgringo]

Ik ben bezig met een website te maken waar een heleboel foto's op komen (die dynamisch, met php, kunnen worden toegevoegd). omdat ik weinig behoefte heb dat een gebruiker moet wachten op het laden van de foto's wil ik alles gaan preloaden. Zoals:

JavaScript:

plaat1 = new Image();
plaat1.src = "img/plaat1.gif";

Nu wil ik dit met php gaan maken dus dat het zoiets wordt: (dus nadat php-script gelopen heeft)

JavaScript:

plaat1 = new Image();
plaat1.src = "img/plaat1.gif";
plaat2 = new Image();
plaat2.src = "img/plaat2.gif";
[...]

Dit gaat dan in een verborgen iframe lopen.

Mijn vraag is nu als ik een plaatje laadt met:

HTML:

<img src="img/plaat1.gif">

moet hij dan nog opgehaalt worden?
Dit omdat het preloaden in een andere iframe gebeurd dat waar het plaatje getoond wordt. Of moet ik hem naar mijn variabele plaat1 laten verwijzen?

[--MeAngry--]

Waarom zou je het in een IFRAME doen dan? Kan toch ook prima binnen dezelfde pagina?

JavaScript:

plaat1.onload = function () {
  document.getElementById('imageElementID').src = plaat1.src;
}

[elgringo]

omdat het 100+ foto's zijn waarvan de gebruiker ze niet altijd hoeft te zien, 100 foto's cachen duurt ff vandaar in een iframe.

De foto's worden alleen getoond als de gebruiker dat wenst en dan wil ik dat ze gecached zijn.

[disjfa]

En nogmaals, daar is geen iframe voor nodig.

Zet ze gewoon in een arraytje in js. En desnoods pas ophalen als je ze (bijna) moet laten zien.

[ Voor 52% gewijzigd door disjfa op 20-09-2007 14:28 ]

[elgringo]

disjfa schreef op donderdag 20 september 2007 @ 14:27:
En nogmaals, daar is geen iframe voor nodig.

Zet ze gewoon in een arraytje in js. En desnoods pas ophalen als je ze (bijna) moet laten zien.

hoe weet ik of een gebruiker in de toekomst een plaatje wil zien?
die iframe heb ik toch nodig voor een php script wat constant loopt en daar wilde in hem bijplakken.

Of kan ik al die plaatjes laden in dat fram en als de gebruiker wil zien een verwijzing van frame 1 naar frame2 (waar de plaatjes gecached worden) naar een plaatje?

[--MeAngry--]

Waar we op doelen is dat je de plaatjes toch wel gaat laden, of je dat nu in een IFRAME doet of in de pagina zelf.
Als je Javascript gebruikt om het plaatje op te halen wordt die code toch pas uitgevoerd als de rest van de pagina geladen is. Dus kun je het beter in de pagina zelf doen. En als je dan een plaatje nodig hebt, trek je die uit het Array dat al geinitialiseerd en wel klaar staat.

Even ter verduidelijking, maar ik ga er vanuit dat je dat al wist:

JavaScript:

plaat1 = new Image();
plaat1.src = "img/plaat1.gif";

Zorgt er niet voor dat de afbeelding zichtbaar wordt, maar enkel dat hij opgehaald wordt. Dus wat maakt het uit waar je dat plaatst?

[ Voor 26% gewijzigd door --MeAngry-- op 20-09-2007 15:58 ]

[elgringo]

Al ik alle plaatjes ophaal en verwijs naar img/plaat1.gif (en niet naar de java var plaat1) wordt hij toch uit de gache gehaald?

Het probleem met 100+ foto's cachen is dat het lang duurt en als ik het is een frame doe wat eigenlijk weinig worden alle plaatje op de achtergrond gecached.

[RM-rf]

Volgens moet je het idee opgeven dat je alles 'met PHP moet doen'....


wat je wilt doen, nl. het clientside laten cachen van afbeeldingen is ook iets dat je met Javasript en clentside _moet_ doen, dus is het toepassen van PHP verder geheel irrelevant (natuurlijk kan het wel zijn dat je javascript gegenereert wordt door PHP, maar je kunt je beter concentreren erop dat je een 'javascript-script' maakt dat dient te werken)..

Overigens... pre-loaden betekent niet dat er _niet_ gewacht moet worden... hoe je het ook wend of keert, geladen moet er tóch...
pre-loaden kan wel zinnig zijn om bv bij bepaalde onmouseovers een direkte 'response' te krijgen...

maar als je iets bedoelt als een AJAX-toepassing waar dingen 'on-the-fly' gegenereert en geladen kunnen worden, is het juist wer een beetje onzinnig om te gaan preloaden ...
de truc van AJAX is nu eigenlijk dat het een soort van omgekeerd preload-javascript is....
waarbij dan elementn pas geladen en genereert worden nadat een user bepaalde handelingen gemaakt heeft.

[elgringo]

Het probleem is dat ik een db heb met foto's erin. Daarvoor heb ik PHP nodig.
Mijn vraag was of ik met js in frame 1 een image preload (omdat er toch niets gedaan wordt) hij in frame 2 uit de cache getrokken kan worden.

AJAX in totaal niet ter sprake (in heb geen xml) ik heb alleen een PHP thread, maar die is serverside.

Ik wil dus dat de plaatjes (alle) gepreload worden terwijl de gebruiker een stukje text leest (lees niet actief op dingen aan het klikken is). Ik wil het in een apart frame doen zodat ze dan al geladen zijn als het nodig is. En niet als de gebruiker foto's wil zien dat ze dan nog gepreload moeten worden.

[RM-rf]

Frames hebben hier niks mee te maken... die wil je écht niet gebruiken en bieden geen meerwaarde mbt tot een eventueel preloading-probleem.

een image preload is gewoon het al eerder genoemde:

JavaScript:

plaat1 = new Image();
plaat1.src = "img/plaat1.gif";

en betekent dat als dat Image-object geladen is, het plaatje "img/plaat1.gif" zich verder in de browsercache bevind en uit deze cache gehaald wordt als het ergens op de pagina on-the-fly gegenereerd wordt.. sterker nog; waarschijnlijk wordt die afbeelding ook in vervolg-pagina's nog steds uit de cache gehaald (wat wel afhankelijk is van de HTTP-headers side de server vesrtuurd, wat je goed moet bedenken als je bv PHP gebruikt om afbeeldingen te 'genereren')

[ Voor 26% gewijzigd door RM-rf op 21-09-2007 10:53 ]

[Verwijderd]

hehe, gaan we dynamisch laden van plaatjes ook al AJAX noemen?

JavaScript:

img.src = 'newPlaatje.jpg';

ja, het is asynchroon
ja, het is javascript
ja, het is een httprequest
nee, geen xml, maar hoeveel "AJAX" implementaties werken nu echt met xml?

[elgringo]

RM-rf schreef op vrijdag 21 september 2007 @ 10:51:
Frames hebben hier niks mee te maken... die wil je écht niet gebruiken en bieden geen meerwaarde mbt tot een eventueel preloading-probleem.

een image preload is gewoon het al eerder genoemde:

JavaScript:

plaat1 = new Image();
plaat1.src = "img/plaat1.gif";

en betekent dat als dat Image-object geladen is, het plaatje "img/plaat1.gif" zich verder in de browsercache bevind en uit deze cache gehaald wordt als het ergens op de pagina on-the-fly gegenereerd wordt.. sterker nog; waarschijnlijk wordt die afbeelding ook in vervolg-pagina's nog steds uit de cache gehaald (wat wel afhankelijk is van de HTTP-headers side de server vesrtuurd, wat je goed moet bedenken als je bv PHP gebruikt om afbeeldingen te 'genereren')

Dank je voor het antwoordt op mijn vraag. (ik ga geen plaatjes maken met PHP, alleen uit een db trekken (die zijn namen, geen data))

[Verwijderd]

elgringo schreef op vrijdag 21 september 2007 @ 08:34:
Het probleem met 100+ foto's cachen is dat het lang duurt en als ik het is een frame doe wat eigenlijk weinig worden alle plaatje op de achtergrond gecached.

Als je begint met cachen nadat de pagina geladen is (onload), dan is het effect toch identiek? Dan hoeft een gebruiker niet langer te wachten dan wanneer je een iframe zou gebruiken.