Plaatjes preloaden voordat de site verschijnt *

[Verwijderd]

Hallo,

Ik probeer mijn site z'n graphics te laten laden voordat je hem te zien krijgt. Dus alles laad eerst en dan verschijnt het hele zootje in één keer. Tot zover is het me niet gelukt, en ik weet ook niet eens of dit wel mogelijk is in HTML. Misschien dat jij mij verder kunt helpen?

~Mathijs

[Cyphax]

Volgens mij wil jij de plaatjes preloaden.
Dat kan, er zijn een heleboel voorbeelden te vinden, zoals hier.
In ieder geval is dat "preloaden" een keyword waarmee je veel kan vinden.

[ Voor 18% gewijzigd door Cyphax op 03-03-2008 18:04 ]

[Zerora]

[google=preloading,html] brengt mij naar deze site.

[Verwijderd]

Dan zocht ik totaal verkeerd. Ik ga het op Rakkerzero's zijn manier proberen te zoeken & even lezen wat cyphax heeft gepost. Dank je mannen!

[XangadiX]

titelfixje gedaan

[Tofu]

Ik heb zelf ook ooit zo iets gemaakt voor de website in mijn signature. Superperfecte code zal het waarschijnlijk niet zijn, maar het werkt wel. Je kan eens naar de code kijken als referentie.
Ik heb het getest op een groot aantal browsers. Het is helaas (denk ik) vooral de Google Ads die voor vertraging zorgen.

[Verwijderd]

Hó hó hó! Niet te snel , ik ben nog maar een beginner (excuses).
Ik kijk op deze site en zie dat ik het volgende moet gebruiken:

<script type="text/javascript">
<!-- hide from non JavaScript Browsers

Image1= new Image(150,20)
Image1.src = "pic1.gif"

Image2 = new Image(10,30)
Image2.src = "pic2.gif"

Image3 = new Image(72,125)
Image3.src = "pic3.gif"

// End Hiding -->
</script>

Ik moet voor al mijn plaatjes dus zo'n image tag aanmaken? Dit is de snelste manier om al mijn images te preloaden? Zo ja; moet ik van het script alleen de 'new image' & 'hoogte + breedte' veranderen zodat het precies zo is zoals mijn plaatjes zijn?

~Mathijs

[XangadiX]

hey Mathijs1988, het is goed gebruik hier op tweakers om je posts niet te ondertekenen met een naam. Je avatar is meer dan voldoende om te zien wie je bent. Lees ook eens: Algemene gedragsregels (Netiquette) #reageren

[Mei]

Er zijn in veel gevallen handige trucs om niet te hoeven preloaden via Javascript. Hover effecten bij menu's bijvoorbeeld. Veelal worden er nog afbeeldingen voor gebruikt met een JS hover. 9 van de 10 keer kan je het met gewone tekst en een CSS hover ook af. Heb je zeker weten een afbeelding nodig voor het hover-effect, maak dan één afbeelding met de achtergrondafbeelding van de normale staat en de hover-staat erin. Via background-position (CSS eigenschap) kan je het goede deel van de afbeeldingen als achtergrond laten weergeven. Je hoeft maar één afbeelding te laten en het werkt ook nog eens bij de 10% van de mensen die Javascript uit heeft staan.

Het is trouwens niet erg gebruiksvriendelijk om de pagina eerst volledig te willen opbouwen voordat deze aan de gebruiker verschijnt. De gebruiker kan namelijk ook alleen via die pagina willen doorklikken naar een andere pagina. Dat kan sneller als de pagina gewoon zichtbaar opgebouwd wordt.

[Verwijderd]

Mei schreef op maandag 03 maart 2008 @ 19:15:Het is trouwens niet erg gebruiksvriendelijk om de pagina eerst volledig te willen opbouwen voordat deze aan de gebruiker verschijnt. De gebruiker kan namelijk ook alleen via die pagina willen doorklikken naar een andere pagina. Dat kan sneller als de pagina gewoon zichtbaar opgebouwd wordt.

Maar aan de andere kant kan het ook weer wel gebruikersvriendelijk zijn, want wanneer deze door klik pagina precies hetzelfde is opgebouwt als de 1e pagina, laad deze weer sneller dankzei het preloaden. Of zit ik fout?

[Zerora]

Verwijderd schreef op maandag 03 maart 2008 @ 19:40:
[...]


Maar aan de andere kant kan het ook weer wel gebruikersvriendelijk zijn, want wanneer deze door klik pagina precies hetzelfde is opgebouwt als de 1e pagina, laad deze weer sneller dankzei het preloaden. Of zit ik fout?

Nou ja, ik denk dat tot je ongeveer 300kb tot 500kb maximaal voor de gehele pagina aan data preloaden nog wel moet kunnen, maar als je daar al overheen gaat zou ik toch echt voor de makkelijke oplossing kiezen en de boel zichtbaar laten inladen.

[Sebazzz]

Maar aan de andere kant kan het ook weer wel gebruikersvriendelijk zijn, want wanneer deze door klik pagina precies hetzelfde is opgebouwt als de 1e pagina, laad deze weer sneller dankzei het preloaden. Of zit ik fout?

Maar waarom zou je dat doen? De Gebruiker zal indien hij dat wil op die andere pagina blijven hangen en dan laadt het toch ook. Ik hou ook van snel doorklikken in plaats van te wachten tot de pagina helemaal is opgebouwd.

Je avatar is meer dan voldoende om te zien wie je bent.

Hij heeft geen avatar

[Xcalibur]

Wat is precies de toegevoegde waarde van het preloaden?

Als je het 'springen' van de content wilt voorkomen kan je beter al je images afmetingen geven (in de HTML), als je mouseover images van een menu wilt laten zien kan je je afvragen of je je menu niet beter als tekst en met een stylesheet kunt opmaken

Mijn ervaring is in ieder geval dat het preloaden meestal niet bijzonder veel nut heeft

[Verwijderd]

Xcalibur schreef op maandag 03 maart 2008 @ 19:51:
Wat is precies de toegevoegde waarde van het preloaden?

Als je het 'springen' van de content wilt voorkomen kan je beter al je images afmetingen geven (in de HTML), als je mouseover images van een menu wilt laten zien kan je je afvragen of je je menu niet beter als tekst en met een stylesheet kunt opmaken

Mijn ervaring is in ieder geval dat het preloaden meestal niet bijzonder veel nut heeft

Er is geen toegevoegde waarde eigenlijk. Ik houd ervan wanneer de site in één keer popt, ipv langzaam opbouwt, misschien dat dit vreemd in de oren klinkt . Ik expirimenteer ook hier en daar, ben vrij nieuw in het maken van websites.

Even een vraagje tussendoor. Mijn image map is 800kb. Is dit veel ?

[Mei]

Met experimenteren is zeker niks mis Ik houd er wel van, wat aparte dingen. Het belangrijkste aan experimenteren is misschien nog wel het nadenken over of het praktisch is.

800KB is érg veel voor een normale site. Ik zou de complete paginagrootte (dus alles bij elkaar, markup, afbeeldingen, enz) toch binnen de paar honderd KB (zegmaar 200 tot 300) MAX houden. Probeer dan ook zoveel mogelijk te laten cachen (Nog een reden waarom preloaden lang niet altijd nut heeft. Na de eerste keer gebruikt te zijn worden afbeeldingen altijd gecached), dus dus Javascript en CSS allemaal in externe bestanden.

[TERW_DAN]

Verwijderd schreef op maandag 03 maart 2008 @ 20:06:
[...]


Er is geen toegevoegde waarde eigenlijk. Ik houd ervan wanneer de site in één keer popt, ipv langzaam opbouwt, misschien dat dit vreemd in de oren klinkt . Ik expirimenteer ook hier en daar, ben vrij nieuw in het maken van websites.

Even een vraagje tussendoor. Mijn image map is 800kb. Is dit veel ?

800kb is 100kB, met een 1Mb verbinding is dat 1 seconden laden, dat is dus niet echt heel veel. Of het veel is hangt natuurlijk ook van de soort site af, als je een site met hoge resolutie foto's aanbiedt, dan is het zo dat je gebruikers natuurlijk verwachten dat je site wat meer tijd nodig zal hebben om te laden, dan dat als je site redelijk simpel in elkaar zit.

Wat ik voor een site ooit heb gedaan is een script gemaakt dat de content pas zichtbaar maakt op het moment dat de readystate van het document complete was. Op deze manier zag je gewoon alleen de achtergrond van de site, tot alles geladen was en dan stond het er in 1 keer. Nu was dat wel een project waarbij we veel foto's gebruikten en nog wat dynamische dingen. Maar het is een van de manieren om het mee te doen en het werkt best aardig.

[Verwijderd]

Zo ver ben ik nog lang niet ben ik bang. Het is ook meer een grafische site (zie hier). Is het écht zo erg dat mijn site 4 tot 8 keer zo groot is dan een redelijke website grote?

[Mei]

@Terw_Dan: Ik denk dat hij bytes bedoelt als ik eerlijk moet zijn. Het gebruiken van de readystate is wel leuk en aardig, maar het maakt websites er niet gebruiksvriendelijker op. Moet je een applicatie maken waarbij het gewoon niet praktisch is ermee te werken als hij nog niet volledig geladen is, dan is het een ander verhaal. Voor een normale site raad ik het in ieder geval zeer af.

//edit: @TS: Ik zou echt wat beter cropper/comprimeren. Je achtergrondafbeelding kan gewoon flink gecropped worden. 1000px breed is echt niet nodig. Verder zou ik proberen of ik zoveel mogelijk afbeeldingen om kan zetten naar gif. Dat zal in de meeste gevallen de bestandsgrootte drastisch verminderen, terwijl je in de praktijk geen of een verwaarloosbare kwaliteitsverlies zal zien.

[ Voor 33% gewijzigd door Mei op 03-03-2008 20:30 ]

[TERW_DAN]

Mei schreef op maandag 03 maart 2008 @ 20:27:
@Terw_Dan: Ik denk dat hij bytes bedoelt als ik eerlijk moet zijn. Het gebruiken van de readystate is wel leuk en aardig, maar het maakt websites er niet gebruiksvriendelijker op. Moet je een applicatie maken waarbij het gewoon niet praktisch is ermee te werken als hij nog niet volledig geladen is, dan is het een ander verhaal. Voor een normale site raad ik het in ieder geval zeer af.

Hij heeft het toch echt over bits. En het lijkt me dat iemand die bezig is met websites het verschil tussen bits en bytes wel doorheeft (althans, lijkt me wel als je downloadtijden e.d. berekent).

En het gebruiken van de readystate is een manier, hoeft niet de beste te zijn, maar in sommige gevallen kan het best handig zijn, zeker als je wat dingen moet pre-loaden

[Verwijderd]

@Mei - Omzetten Gif;
Ik heb dat is vergeleken, maar wanneer ik m'n images save in photoshop met kwaliteit 8 en jpg zijn ze kleiner dan plaatjes die als gif worden opgeslagen met 128 kleuren.

[Cyphax]

Verwijderd schreef op maandag 03 maart 2008 @ 20:06:
Er is geen toegevoegde waarde eigenlijk. Ik houd ervan wanneer de site in één keer popt, ipv langzaam opbouwt, misschien dat dit vreemd in de oren klinkt . Ik expirimenteer ook hier en daar, ben vrij nieuw in het maken van websites.

In een keer verschijnen heeft zo z'n charmes, maar aan de andere kant heb je in eerste instantie geen indicatie van hoe lang je site nog nodig heeft om te laden. Als ie netjes opgebouwd wordt kan je dat wel een beetje inschatten. De plaatjes duren doorgaans het langst en als de content er vast staat kunnen mensen veel sneller met je site werken. Het is een kwestie van smaak, maar ik zou het zelf niet doen.

Oh en als het probleem is dat de opbouw te lang duurt is je hosting te traag.
Klinkt gaar, maar lange laadtijden los je niet op door te preloaden.

Even een vraagje tussendoor. Mijn image map is 800kb. Is dit veel ?

Kilobyte: da's wel potig, of het moet qua afmetingen groot zijn. Kilobit: 100KB, da's te doen.

[ Voor 7% gewijzigd door Cyphax op 03-03-2008 20:41 ]

[TERW_DAN]

Mei schreef op maandag 03 maart 2008 @ 20:27:
@Terw_Dan: Ik denk dat hij bytes bedoelt als ik eerlijk moet zijn. Het gebruiken van de readystate is wel leuk en aardig, maar het maakt websites er niet gebruiksvriendelijker op. Moet je een applicatie maken waarbij het gewoon niet praktisch is ermee te werken als hij nog niet volledig geladen is, dan is het een ander verhaal. Voor een normale site raad ik het in ieder geval zeer af.

Hij heeft het toch echt over bits. En het lijkt me dat iemand die bezig is met websites het verschil tussen bits en bytes wel doorheeft (althans, lijkt me wel als je downloadtijden e.d. berekent).

En het gebruiken van de readystate is een manier, hoeft niet de beste te zijn, maar in sommige gevallen kan het best handig zijn, zeker als je wat dingen moet pre-loaden. Maar als het enkel om een paar plaatjes gaat zijn er vast genoeg andere manieren.

[Intrique]

Dit is een preload script met een laadbalk. Ik vind 'em zelf erg handig.
http://www.dynamicdrive.com/dynamicindex4/preloadimage.htm

[Mei]

@Terw_Dan: Zeker weten wel bytes Heb je Firefox? Ga eens naar zijn site > right click > page info > media. Daar kan je zien hoe groot alle afbeeldingen zijn.

Verwijderd schreef op maandag 03 maart 2008 @ 20:35:
@Mei - Omzetten Gif;
Ik heb dat is vergeleken, maar wanneer ik m'n images save in photoshop met kwaliteit 8 en jpg zijn ze kleiner dan plaatjes die als gif worden opgeslagen met 128 kleuren.

Hmm, raar? Kan me bijna niet voorstellen dat een afbeeldingen van enkele pixels bij enkele pixels in GIF 10KB zou zijn

[Verwijderd]

Mja, ik heb het alleen met één of twee vrij grote images geprobeert. Scheelt het zoveel wanneer ik kleinere images in gif opsla?

[Morpheus_at_work]

Mei schreef op maandag 03 maart 2008 @ 20:17:
Met experimenteren is zeker niks mis Ik houd er wel van, wat aparte dingen. Het belangrijkste aan experimenteren is misschien nog wel het nadenken over of het praktisch is.

800KB is érg veel voor een normale site. Ik zou de complete paginagrootte (dus alles bij elkaar, markup, afbeeldingen, enz) toch binnen de paar honderd KB (zegmaar 200 tot 300) MAX houden. Probeer dan ook zoveel mogelijk te laten cachen (Nog een reden waarom preloaden lang niet altijd nut heeft. Na de eerste keer gebruikt te zijn worden afbeeldingen altijd gecached), dus dus Javascript en CSS allemaal in externe bestanden.

Tenzij je weer in je code opneemt , dat hij niet mag cachen

[Mei]

Over het algemeen moeten dat soort kleine afbeeldingen maximaal 1 a 2 KB worden in GIF. Althans, dat is mijn ervaring.

[TERW_DAN]

Verwijderd schreef op maandag 03 maart 2008 @ 21:00:
Mja, ik heb het alleen met één of twee vrij grote images geprobeert. Scheelt het zoveel wanneer ik kleinere images in gif opsla?

Dat ligt helemaal aan de compressie die je nu hebt en hoe groot ze zijn. Post ze anders eens hier, dan is er wat zinnigs over te zeggen.

[Zerora]

Verwijderd schreef op maandag 03 maart 2008 @ 21:00:
Mja, ik heb het alleen met één of twee vrij grote images geprobeert. Scheelt het zoveel wanneer ik kleinere images in gif opsla?

Gif hoeft niet zozeer een kleiner te zijn in opslagruimte, maar als je bijv. met Photoshop de kwaliteit van je jpeg-image iets lager opslaat dan kan dat vaak al genoeg zijn. 100% is overkill vaak voor simpele images op een website. 70% is goed genoeg en het verschil met 100% is niet zozeer met het blote oog te zien.

[remmelt]

Een paar tips:

- sla je plaatjes in een slechter formaat op. 10-20KB voor een mini-ikoontje is veel te veel. 800KB voor je site is echt te veel, ik vindt 400K al aan de grens.
- Stop met het gebruiken van tables voor het positioneren van content. Dit kost veel html en maakt je site moeilijk te onderhouden.
- In de net pagina van firebug zie ik dat je 53 hits hebt, voor 1 pagina. Een browser opent een aantal connecties tegelijk naar je site, maar natuurlijk nooit 53. Wat je kan overwegen is om al je ikoontjes in een plaatje te stoppen en dat dan te positioneren. Dit is een tweak, een afweging: aan de ene kant laadt de eerste keer dan sneller, aan de andere kant blijven al die ikoontjes natuurlijk gecached (als je ze niet preload). Kijk ook eens hoe het op tweakers.net is gedaan met de rechtsboven-menuutjes:
http://tweakimg.net/g/if/channelnav/main.gif

[Tofu]

Het voordeel van preloaden, vind ik, dat een site met een helehoop javascript trucjes niet zo loopt te springen, je kan niet doorklikken zonder de advertenties gezien te hebben, en het is gewoon leuk om te maken

[Verwijderd]

Bedankt voor de tips! Ik ga zowiezo het één en ander proberen. Blijven discusseren is welkom natuurlijk .

[Verwijderd]

Nou. Bedankt voor de convert naar gif tip Mei. De site zit nu tussen de 100KB & 150KB ipv tussen de 800KB en 900KB.