login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Wachten tot compleet geladen (Opgelost)

Offline bertenz - 18/08/2007 16:31
Avatar van bertenzHTML beginner Hallo allemaal,

Om naast elkaar staande div's even hoog te krijgen, sla ik met javascript eerst alle hoogtes van de div's op in mijn database. Later zorg ik er met een php-script voor dat de naast elkaar gelegen div's dezelfde hoogte krijgen (de grootste hoogte wordt dan bij beide div's ingesteld).

Het achterhalen van de hoogte van de div doe ik op de volgende manier:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2. 	var hoogte
  3. 	hoogte = document.getElementById('div_hotel_<?php echo $hotel_id ?>').offsetHeight;
  4. 	var new_url = "div_height_java.php?page=results&language=<?php echo $lang; ?>&fid=<?php echo $fid; ?>&height=" + hoogte +"&hotelid=<?php echo $hotel_id; ?>";
  5.  
  6. 	window.location.href=new_url;
  7. </script>


Ik heb het script al een keer de hele database laten doorlopen, maar volgens mij klopt er iets niet. Sommige div's zijn namelijk nog te klein als ik ze de hoogte die in de database staat mee geef. Ik zat eraan te denken dat dit mogelijk komt doordat er ook een plaatje in de div staat en als dat plaatje nog niet geladen is, dat de hoogte dan kleiner is. (dit denk ik vooral omdat het niet bij alle div's is, dus misschien had de server even een iets langere laadtijd voor het plaatje nodig ...).
Daarom zou ik graag willen weten of het mogelijk is om de pagina eerst de tijd te geven om het plaatje in te laden en daarna pas de hoogte op te halen en te verversen. Iemand een idee hoe dit zou kunnen ??

6 antwoorden

Gesponsorde links
Offline BramBo - 21/08/2007 09:41
Avatar van BramBo JS gevorderde window.onload wacht tot de complete DOM + images geladen is. Dit is vaak een probleem aangezien het onzin is om te wachten op afbeeldingen. Maar in jou geval is het ideaal.. Trigger je functies dus dmb window.onload bijv:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. window.onload = function() { FunctieA(); FunctieB(); }
  2.  
  3. function FunctieA() { alert('Klaar met laden!'); }
  4.  
  5. function Functieb() { alert('Klaar met laden en klaar met functie A!'); }
Offline bertenz - 22/08/2007 20:53
Avatar van bertenz HTML beginner Hartstikke bedankt voor jouw hulp. Ik ben echter niet echt zo bekend met Javascript, maar als ik het goed begrijp, zorgt dan het volgende stukje (door BramBo gegeven) code ervoor dat functieA en functieB pas uitgevoerd worden als "window.onload" TRUE is ??
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. window.onload = function() { FunctieA(); FunctieB(); }

Is het overigens ook echt nodig om 2 functies erin te zetten of is het gewoon om het voorbeeld te verduidelijken ?? (mij lijkt het laatste, maar ...)
Nogmaals hartstikke bedankt en ik zal het binnenkort even gaan testen.

Bertenz
Offline BramBo - 23/08/2007 09:27 (laatste wijziging 23/08/2007 09:32)
Avatar van BramBo JS gevorderde Window.onload is niet echt een boolean (TRUE/FALSE). Goede informatie over events is te vinden op: http://www.quirksmode.org/js/introevents.html

Je kan werkelijk alles in window.onload zetten. initialisaties, declaratie, iteraties etc. etc. Dus 1 functie kan je aanroepen. of de complete functie binnen je window.onload zetten (zonder function xxx() )

Mocht je maar 1 functie willen gebruiken. kan je het ook anders oplossen. nl:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. window.onload = functie;
(let op geen () ! ). Mocht je in je functie wel paramters meegeven dien je het te doen als ik boven heb aan getoont.
Offline bertenz - 23/08/2007 17:28 (laatste wijziging 23/08/2007 17:30)
Avatar van bertenz HTML beginner Bedankt voor jouw uitleg, maar volgens mij doe ik nog steeds iets fout. Ik heb de (volgens mij) belangrijke delen van het artikel dat jij gaf ook gelezen. Ik heb nu van het gedeelte waar ik de hoogte van een DIV achterhaal een functie gemaakt en tussen <head> en </head> gezet. (dat moet toch, of niet ?)

Overigens ziet dat stukje er zo uit:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2. 	function div_height(hotel_id)
  3. 	{
  4. 		var hoogte
  5. 		hoogte = document.getElementById('div_hotel_'+ hotel_id).offsetHeight;
  6. 		var new_url = "index.php?page=results&fid=<?php echo $fid; ?>&funpark=<?php echo $funpark_encoded; ?>&height=" + hoogte +"&hotelid=" + hotel_id + "&language=<?php echo $lang; ?>";
  7. 		document.write(new_url +", -- ,"+ height_div);
  8. 	}
  9. </script>


Verder ziet het stukje waar ik de functie mee aanroep er zo uit:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2. 	window.onload = div_height("100");
  3. </script>

(die 100 heb ik er alleen maar in staan omdat ik er mee aan het testen ben, later wordt dit een php-variabele)

Heb ik het nou eigenlijk toch niet helemaal begrepen of zit er maar een klein foutje in het stukje ? Wordt window.onload trouwens wel door alle browsers ondersteund ? (heb nu FireFox)
Offline BramBo - 24/08/2007 13:36 (laatste wijziging 24/08/2007 13:37)
Avatar van BramBo JS gevorderde onload is een w3c standaard, dus ja het wordt door iedere browser die zichzelf serieus mag nemen (op lynx na ) ondersteunt.

Zoals ik in mijn vorige post uit heb proberen te leggen kan je een functie niet aanroep met () direct als je window.onload attribute.
Wanneer je een functie met functie haken ( () ) aanroept wordt deze direct uitgevoerd en niet gebind. Je kan het in jou geval op 2 manieren doen die wel correct zijn :

js code - Bekijk de code zonder highlighting - Klap code in 
  1. window.onload = function() { div_height(100); }


of:

js code - Bekijk de code zonder highlighting - Klap code in 
  1. window.onload = function() { 

  2.        var height_div = 100;

  3.  
  4.         var hoogte = document.getElementById('div_hotel_'+ hotel_id).offsetHeight;

  5.         var new_url = "index.php?page=results&fid=<?php echo $fid; ?>&funpark=<?php echo $funpark_encoded; ?>&height=" + hoogte +"&hotelid=" + hotel_id + "&language=<?php echo $lang; ?>";

  6.         document.write(new_url +", -- ,"+ height_div);

  7.  }


(let op dat je window.onload maar 1x definieerd, als je het vaker definieert wordt alleen de laatste uitgevoerd.)
Offline bertenz - 25/08/2007 10:35
Avatar van bertenz HTML beginner BramBo hartstikke bedankt voor jouw hulp. Ik had naast de fout in Javascript overigens ook nog een PHP-variabele niet gedeclareerd waardoor het toch nog niet werkte. Het werkt nu heel mooi, dus het komt nu wel weer goed. Nogmaal hartstikke bedankt.

Bertenz
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.188s