[JS] Background images preloaden

[Verwijderd]

Ik zit met het volgende probleem:

Ik ben bezig met een dynamische functie te schrijven voor het genereren van tabbladen. Dit moet voldoen aan het standaard tabblad: en (of meer) tabjes bovenaan en wanneer je op een tab klikt, wordt te tekst eronder neergezet.

Ik wil hierbij de gehele pagina van tevore laden zodat er bij het klikken niets meer hoeft te worden opgehaald. Nu is dat met de tekst al gelukt (d.m.v. styles) maar het wil niet echt met de plaatjes.

Ik weet dat je in javascript een var kunt maken van het type image en daar een plaatje aan kunt koppelen zodat dit al geladen wordt bij het starten van de pagina. Daarna kun je gewoon een <img> de waarde geven van die var (type image).

Maar is dit ook mogelijk voor background images? Ik heb namelijk elke tab een background image gegeven zodat er ook nog tekst op kon worden geschreven (elke tab is een cell). Deze bestaat uit 2 verschillende: de geselecteerde tab en de niet-geselecteerde tab.

Is dit mogelijk en zo ja; hoe?

Ik heb geprobeert het op te lossen op dezelfde manier als bij normale plaatjes, maar dat werkte niet.

[D2k]

Welkom in P&W -> Quickstart om snel aan de slag te kunnen
JS dus P&W -> W&G

[Thijsmans]

*kucht http://www.prammenhanger.nl/anansi/ kuch* zoiets?

[RM-rf]

code:

 var preloadVar = new Image(0,0);
preloadVar.src = 'blaat.gif' // url van te preloaden image

werkt gewoon, ook als je dat wilt toepassen voor background-images


//offtopic
pramhang, url not found?

Not Found
The requested URL /anansi/ was not found on this server.

Apache/1.3.22 Server at www.prammenhanger.nl Port 80

Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en-US; rv:1.0.0) Gecko/20020815

[Thijsmans]

RM-rf schreef op 27 augustus 2002 @ 17:50:

code:

 var preloadVar = new Image(0,0);
preloadVar.src = 'blaat.gif' // url van te preloaden image

werkt gewoon, ook als je dat wilt toepassen voor background-images

pramhang, url not found?

Hier wel maar goed, daar wordt dus idd ook gebruik gemaakt van new Image() met een src ja

[Verwijderd]

Maar ik deed met die image dus:

document.getElementById(id van die <td>).background=preloadVar
en dan krijg ik dus geen plaatje...

[Thijsmans]

code:

myImg = new Image();
myImg.src = 'gfx/bg.jpg';

document.getElementById('contentcel').background=myImg.src;

(...)
<td bgcolor="#FFFFFF" id="contentcel" >

zoals dat staat op de eerder gegeven link

[Verwijderd]

Oke, ik dacht dat ik op die manier alleen maar de naam van de image uit de .src-variabele zou halen en 'm alsnog downloaden

Bedankt!

[Verwijderd]

Oke, ik heb nu een bericht gemaakt met een array van images:

code:

plaatjes = new Array(9);
for (var tel = 0; tel <= 15; tel++)
    plaatjes[tel] = new Image;
plaatjes[0].src = "back_noselect.gif";
plaatjes[1].src = "back_select.gif";
plaatjes[2].src = "left_noselect.gif";
plaatjes[3].src = "left_select.gif";
plaatjes[4].src = "middle_left_select.gif";
plaatjes[5].src = "middle_noselect.gif";
plaatjes[6].src = "middle_right_select.gif";
plaatjes[7].src = "right_noselect.gif";
plaatjes[8].src = "right_select.gif";

Ik heb 2 functies; een die alle tabbladen op non-selected zet, en eentje die het aangeklikte tabblad selected maakt.

Alle images die worden veranderd gaan nu als de volgende 2 voorbeelden:

code:

image = document.getElementById(left);
image.src=plaatjes[2].src;

field = document.getElementById(middle);
field.background=plaatjes[0].src;

Op zich zou dat wel moeten werken

Maar als ik nu in de logs kijk van mijn webserver, zie ik dat, wanneer ik een tabblad aanklik, alle plaatjes toch van de server worden gedownload, wat dus niet de bedoeling is.

[Hangloozz]

Verwijderd schreef op 28 augustus 2002 @ 10:33:
Maar als ik nu in de logs kijk van mijn webserver, zie ik dat, wanneer ik een tabblad aanklik, alle plaatjes toch van de server worden gedownload, wat dus niet de bedoeling is.

waarom is dat niet de bedoeling
moet elke bezoeker zorgen voor z'n eigen plaatjes op z'n HD ofzo?

Ik neem aan dat je wilt dat het uit de cache van de browser gehaald wordt, maar als er iets is waar je weinig of geen invloed op hebt is het wel de cache van de UA van de gebruiker.

Zou me er dus niet te druk om maken.
Het is in ieder geval netjes dat je een preloadertje gebruikt

[Verwijderd]

Maar ik dacht dat het gebruiken van preloaded plaatjes als volgt ging:
Javascript heeft een var waar ik dan een plaatje in stop... de browser ziet dat, haalt het plaatje op en mikt dat in die var.

Vervolgens geef ik een bepaald plaatje een nieuwe inhoud, namelijk die var (met dat plaatje). Dat ie dan gewoon het object, wat ie al had gedownload, erin zet, zodat niet bij elke klik alle 9 plaatjes opnieuw worden gedownload..

Heb ik dit dan verkeerd begrepen?
En zo ja; waarvoor dient het preloaden dan eigenlijk nog?

[Hangloozz]

wat je zegt is klopt helemaal.
Bij het laden van de page haalt ie de image op en blijft aanwezig tot het moment dat ie nodig is.
Waarom er dan tussentijds contact gemaakt wordt met de server voor die afbeelding weet ik niet...misschien om te vergelijken of er een nieuwe versie is?

Marik had je dus ff verkeerd begrepen ik dacht dat je wilde dat alle images bij de gebruiker uit de cache gehaald worden.

[Verwijderd]

nee, inderdaad

Maar in de logs staat dat ie gewoon via get de hele image ophaalt. En het HTTP een beetje kennende, gaat ie m dan ook fijn versturen, wat weer bandbreedte kost. En uit ervaring weet ik dat het een keer in de veel tijd fout gaat, en dan mis ik dus een plaatje, wat nogal vreemd is als dat tijdens het aanklikken van een tabblad gebeurt; heb je in ene een gat in je tabblad..