login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Sneller laden

Offline finduilas - 18/01/2008 11:50
Avatar van finduilasPHP gevorderde Hallo,

Ik heb mijn perfecte layout, perfecte uitlijning alleen...
ik heb hiervoor vanalles gedaan met flash, javascript.
Alleen vindt ik het nu de 1ste x wel traag laden.

http://finduilascreations.be/test/

Graag had ik wat tips gekregen om de laadsnelheid ferm te verminderen.

Mathias

18 antwoorden

Gesponsorde links
Offline Martijn - 18/01/2008 12:04
Avatar van Martijn Crew PHP je plaatjes opslaan als gif 
Offline zointer - 18/01/2008 12:19
Avatar van zointer HTML gevorderde
DeviourSoul schreef:
je plaatjes opslaan als gif 

Nee png

Minder flash gebruiken, gebruik flash voor nuttige dingen niet voor wat die gebruikt.
vb voor die glans over afbeelding dat kan makkelijk met een animatie image.
Weetjes kan gewoon met js.

Gebruik maken div ipv table....

En ts perfect laat dat woord er ook maar uit als perfect is voldoet je site aan w3c wat niet het geval is
Offline vinTage - 18/01/2008 13:07
Avatar van vinTage Nieuw lid als je png gebruikt krijg je natuurlijk een veel grotere filesize dan een gifje.
Een animated gif/png is ook niet hetzelfde, want die staan continue bling bling te doen terwijl het nu netjes in een hover gebeurd.

Ik denk dat je die mouseover swfjes wel een stuk kleiner kan krijgen (max 5 kb ofzo) door die eens te rebuilden.

Dat het lijkt alsof de pagina traag laad, komt door de resize scriptjes..hij laad nu eigenlijk 2 keer...aleja, hij word een stuk gerebuild.
Offline nielsvdwal - 18/01/2008 14:51
Avatar van nielsvdwal PHP gevorderde vintage.. met gif is het ook gewoon mogelijk om bij hover zo'n glans effectje te doen.. gewoon bij hover een animated gif laden.. hoeft helemaal niet steeds 'bling bling' te doen.. ik vind het ook beetje overdreven om voor dat effectje een swf te gebruiken..
Offline vinTage - 18/01/2008 14:55 (laatste wijziging 18/01/2008 14:55)
Avatar van vinTage Nieuw lid Een leeg swfje is 36 bytes en natuurlijk veel makkelijker aan te passen/hergebruiken dan een animated gifje 


Citaat:
gewoon bij hover een animated gif laden
Dat zijn dus al 2 gifjes 
Offline Vincjenzo - 18/01/2008 15:44
Avatar van Vincjenzo Nieuw lid Beter een animated gif dan een clickable plaatje met zo'n hover tekstje "Click to active and use this control" voor elk plaatje. (IE7)

Ik vind de site trouwens helemaal niet langzaam laden.
Offline vinTage - 18/01/2008 15:51
Avatar van vinTage Nieuw lid Dat het object geactiveerd moet worden ligt idd aan de scripter, dat moet hij zeker fixen, maar dan nog ben je niet bij je pappel als je 2 gifjes prefereerd boven één reusable swf 
Offline Pieter - 18/01/2008 16:04
Avatar van Pieter Gouden medaille

SEO guru		 Waarom met een flash doen of 2 gifs als je het met css en 1 afbeelding kan? (achtergrondafbeelding op laten schuiven bij hover)
Dan heb je geen extra laadtijd voor de hover nodig zelfs, aangezien het plaatje dan al standaard geladen is. CSS ftw.
Offline BramBo - 18/01/2008 19:15
Avatar van BramBo JS gevorderde Niet Onload gebruiken, Maar een DomContentLoaded.
heb even de functie(s) die ik zelf gebruik op pastebin gezet

je gebruikt meerdere malen getElementById('id'), het is beter deze te laden in een variabelen in dit geval. Dus boven aan in je resize function this.menu = ..ById('menu'); etc.
This.varnaam krijgt de voorkeur over var varnaam, om het specificeren van global att(publics als je wilt) altijd meer berekeningen vereist dan een `private`.

Verder gebruik je inline styles, een los css filetje werkt sneller! hetzelfde geldt voor een los js filetje.

En datgene dat je in js doet kan vrijwel zeker ook in css zelf bereikt worden. Dit is altijd sneller dan javascript calculaties.

Bekijk eens: http://www.maxd...ge_layouts/
Offline finduilas - 19/01/2008 09:55 (laatste wijziging 19/01/2008 10:37)
Avatar van finduilas PHP gevorderde -Ik ga gif's gebruiken i.p.v jpgs
-Eolas gefixt, wist ik al maar dat heeft volgens mij niets met snelheid te maken 
- Ik ga eens kijken voor hetzelfde te doen bij weetjes met JS.
-JS aangepast:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. function resize() {
  2. this.menu = document.getElementById('menu');
  3. this.menu2 = document.getElementById('menu2');
  4. this.content = document.getElementById('content');
  5. menu.style.height = "100%";
  6. function client() {
  7. return self.innerHeight || (document.documentElement.clientHeight || document.body.clientHeight);
  8. }
  9. var clientheight = client();
  10. menu.style.height = parseInt(clientheight - 166) + "px";
  11. menu2.style.height = parseInt(clientheight - 166) + "px";
  12. content.style.height = parseInt(clientheight - 166) + "px";
  13. var sheight = document.documentElement.scrollHeight;
  14. if(sheight > clientheight) {
  15. menu.style.height = parseInt(sheight - 166) + "px";
  16. menu2.style.height = parseInt(sheight - 166) + "px";
  17. content.style.height = parseInt(sheight - 166) + "px";
  18. }
  19. }


Kan het nog beter??

Verder dat ik die height zou kunnen doen met CSS wil ik je uitdagen  . Ik heb al vanalles geprobeerd en zoals het moet hier is dit de enige oplossing (met JS bedoel ik dan)

Alvast bedankt,
Mathias

Extra: Voorlopig is het bij een hover maar dat moet verander.
De eerste afbeelding moet na 10sec zo'n schijn hebben. 2de na 20sec, 3de na 30seconden,4de na 40seconden en dan opnieuw 1ste,...

Dit kan je niet met een hover, gif (had ik vergeten te vertellen, ik geloof wel dat de .swfs kleiner kunnen)
Offline Pieter - 19/01/2008 10:51
Avatar van Pieter Gouden medaille

SEO guru		 Wat ik me afvraag:
waarom gebruik je die grote afbeelding hier:
http://finduila...rechts.jpg
Je ziet er toch niets van met alles dat ervoor staat. Dan kan je toch evengoed gewoon dat blauwe kleurtje repeat y zetten als background.

De menu hovers kan je oplossen met volgende oplossing:
http://www.giga...javascript/
Waarom trouwens elke keer een andere afbeelding van het menu? De tekst is toch een standaardfont?
Offline finduilas - 19/01/2008 14:14 (laatste wijziging 19/01/2008 14:51)
Avatar van finduilas PHP gevorderde 1. Ik gebruik maar 1 afbeelding voor de ganse header (maps)
2. Ik beslis dat niet, de achtergrond moet met dat patroon.
3. Menu hovers? Ik heb geen menu hovers?

EDIT: Brambo, Het lukt me niet met die Domcontentload
Offline BramBo - 19/01/2008 14:55
Avatar van BramBo JS gevorderde In je script zet je:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. function DOMLoaded() {
  2.  resize();
  3. }


Dit zou voldoende moeten zijn. Zo niet, krijg je errors? word 't niet geladen ?
Offline finduilas - 19/01/2008 15:02
Avatar van finduilas PHP gevorderde http://pastebin.be/8358

-> http://www.finduilascreations.be/test2/ Er gebeurd niets.
Offline BramBo - 19/01/2008 15:19
Avatar van BramBo JS gevorderde Hmm, schijnt niet te werken op alle IE6 merk ik nu ook. Dan moet je nog een functie toevoegen die toch wacht tot alle images ook geladen zijn.. helaas.

Hier de code: http://pastebin.be/8359
Offline finduilas - 19/01/2008 15:36 (laatste wijziging 19/01/2008 16:11)
Avatar van finduilas PHP gevorderde http://www.finduilascreations.be/test2/ ??

php code - Bekijk de code zonder highlighting - Klap code in 
  1. function resize() {
  2. this.menu = document.getElementById('menu');
  3. this.menu2 = document.getElementById('menu2');
  4. this.content = document.getElementById('content');
  5. menu.style.height = "100%";
  6. function client() {
  7. return self.innerHeight || (document.documentElement.clientHeight || document.body.clientHeight);
  8. }
  9. var clientheight = client();
  10. menu.style.height = parseInt(clientheight - 166) + "px";
  11. menu2.style.height = parseInt(clientheight - 166) + "px";
  12. content.style.height = parseInt(clientheight - 166) + "px";
  13. var sheight = document.documentElement.scrollHeight;
  14. if(sheight > clientheight) {
  15. menu.style.height = parseInt(sheight - 166) + "px";
  16. menu2.style.height = parseInt(sheight - 166) + "px";
  17. content.style.height = parseInt(sheight - 166) + "px";
  18. }
  19. }
  20. function clearText(thefield)
  21. {
  22. if(thefield.defaultValue == thefield.value) {
  23. thefield.value = ""
  24. document.getElementById('zoekwoord').style.color = "#000000"
  25. }
  26. else 
  27. {
  28. 	if(thefield.value != "") {
  29. 	thefield.value = "" 
  30. 	}
  31. }
  32. }
  33. function DOMLoaded() {
  34.   if (arguments.callee.done) return;
  35.   if (_timer) clearInterval(_timer);
  36.   arguments.callee.done = true;
  37. };
  38.  
  39. if (document.addEventListener) document.addEventListener("DOMContentLoaded", DOMLoaded, false);
  40.  
  41. /*@cc_on @*/
  42. /*@if (@_win32)
  43.   document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
  44.   var script = document.getElementById("__ie_onload");
  45.   script.onreadystatechange = function() {
  46.     if (this.readyState == "complete") DOMLoaded();
  47.   };
  48. /*@end @*/
  49.  
  50. if (/WebKit/i.test(navigator.userAgent)) { // sniff
  51.   var _timer = setInterval(function() {
  52.     if (/loaded|complete/.test(document.readyState)) {
  53.       DOMLoaded(); 
  54.     }
  55.   }, 10);
  56. }
  57. function DOMLoaded() { resize();}
  58. window.onload   = function() { DOMLoaded();
Offline BramBo - 19/01/2008 17:06
Avatar van BramBo JS gevorderde Je hebt een dubbele declaratie van DOMLoaded. Plaats resize() in de eerste DOMLoaded.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. function DOMLoaded() {
  2.  if (arguments.callee.done) return;
  3.  if (_timer) clearInterval(_timer);
  4.  
  5.   arguments.callee.done = true;
  6.   resize();
  7. }
Offline finduilas - 20/01/2008 14:25 (laatste wijziging 20/01/2008 16:44)
Avatar van finduilas PHP gevorderde
php code - Bekijk de code zonder highlighting - Klap code in 
  1. function resize() {
  2. this.menu = document.getElementById('menu');
  3. this.menu2 = document.getElementById('menu2');
  4. this.content = document.getElementById('content');
  5. menu.style.height = "100%";
  6. function client() {
  7. return self.innerHeight || (document.documentElement.clientHeight || document.body.clientHeight);
  8. }
  9. var clientheight = client();
  10. menu.style.height = parseInt(clientheight - 166) + "px";
  11. menu2.style.height = parseInt(clientheight - 166) + "px";
  12. content.style.height = parseInt(clientheight - 166) + "px";
  13. var sheight = document.documentElement.scrollHeight;
  14. if(sheight > clientheight) {
  15. menu.style.height = parseInt(sheight - 166) + "px";
  16. menu2.style.height = parseInt(sheight - 166) + "px";
  17. content.style.height = parseInt(sheight - 166) + "px";
  18. }
  19. }
  20. function clearText(thefield)
  21. {
  22. if(thefield.defaultValue == thefield.value) {
  23. thefield.value = ""
  24. document.getElementById('zoekwoord').style.color = "#000000"
  25. }
  26. else 
  27. {
  28. 	if(thefield.value != "") {
  29. 	thefield.value = "" 
  30. 	}
  31. }
  32. }
  33. function DOMLoaded() {
  34.   if (arguments.callee.done) return;
  35.   if (_timer) clearInterval(_timer);
  36.   arguments.callee.done = true;
  37.   resize();
  38. };
  39.  
  40. if (document.addEventListener) document.addEventListener("DOMContentLoaded", DOMLoaded, false);
  41.  
  42. /*@cc_on @*/
  43. /*@if (@_win32)
  44.   document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
  45.   var script = document.getElementById("__ie_onload");
  46.   script.onreadystatechange = function() {
  47.     if (this.readyState == "complete") DOMLoaded();
  48.   };
  49. /*@end @*/
  50. if (/WebKit/i.test(navigator.userAgent)) { // sniff
  51.   var _timer = setInterval(function() {
  52.     if (/loaded|complete/.test(document.readyState)) {
  53.       DOMLoaded(); 
  54.     }
  55.   }, 10);
  56. }
  57. window.onload   = function() { DOMLoaded();


Zo bedoel je toch? Heeft nog steeds hetzelfde effect.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.248s