15 berichten aan het bekijken - 1 tot 15 (van in totaal 15)
  • Q:
    Bijdrager
    Chillie

    Preloader voor hele website

    Hai,

    Ben bezig met het ontwikkelen van een preloader voor een website.
    Nu heb ik een hele eenvoudige versie gevonden op internet. Deze laat standaard een div zien over de hele pagina (zodat de pagina niet zichtbaar is, zelf zo opgemaakt) en de body heeft een onload script die de div uitschakelt (onload=’HidePreloader()’ )

    Dat werkt. Maar met een snellere internet verbinding ‘knippert’ bij iedere pagina de preloader er even voorlangs voordat je op de pagina komt. Bij langzamere verbindingen ziet het er mooi uit.
    Nu wilde ik dus een preloader maken die bij het eerste bezoek de belangrijkste images alvast gaat laden, zodat je ook ff de preloader ziet, en daarna op volgende pagina’s geen preloader meer nodig is omdat (bijna) alles al geladen is.
    Dit alles wil ik graag in Javascript uit laten voeren. Het moet mogelijk zijn want ik heb al veel verschillende preloaders in javascript gezien maar nog niet zo een als ik wil (afbeeldingen van volgende pagina’s alvast laden).

    Weet iemand zo’n scriptje of kan iemand me hiermee op weg helpen.
    Bij voorkeur zou ik graag gebruik willen maken van de prototype library, gezien ik die in m’n andere javascripts op die site ook al gebruik.

    Alvast bedankt,
    Robin 8)

    Bijdrager
    praseodym

    Het correctie antwoord zou zijn: niet. Dit soort dingen zijn gewoon verschrikkelijk irritant, waarom mag de gebruiker niet alvast de content lezen terwijl een aantal (minder belangrijke) plaatjes worden ingelezen? Als je zo veel van loading screens houdt dan moet je Flash gaan gebruiken :wink: .

    Bijdrager
    Chillie

    Loading screens zijn niet irritant in de juiste toepassing. Het is pas irritant als je lekker een site wilt doorbladeren met rich content waar je iedere keer weer op moet wachten als je iets doet.
    Daarom wil ik e.e.a. preloaden.
    En dit is mogelijk met javascript, dat weet ik. Dus flash hoeft hier niet gebruikt te worden en wil ik ook liever niet gebruiken.

    Bijdrager
    praseodym

    Natuurlijk, het kan wel. De simpelste methode is om met javascript vóór de onload de grootste resources van andere pagina’s te laden. Een automatische manier met puur javascript is ook wel mogelijk (bv. links op de pagina parsen en met AJAX die pagina’s weer checken op images e.d.) maar is veel meer werk dan het oplevert.

    Bijdrager
    iAlwin

    Ik snap het ook niet echt. Waarom wil je gaan preloaden? Omdat miljarden websites dat juist niet hebben? Daarnaast is het preloaden met javascript uit den boze. Waarom gaat men er altijd maar vanuit dat de gebruiker javascript heeft geactiveerd?

    Preloaden vind ik een beetje anno 1997… maar goed, ik neem aan dat het puur om afbeeldingen gaat dus vooruit.
    Je kan dit doen door gewoon binnen je body tags afbeeldingen in te laten laden, maar ze domweg niet te laten zien. Daar zijn 1001 mogelijkheden voor.

    Dan nog, als het traag lijkt te gaan is het toch altijd je browser. Met een simpele breedband verbinding is het binnenhalen van de plaatjes milliseconden werk, maar de pagina’s moeten wel gerenderd worden.

    Ook ik ervaar preloading als zwaar irritant…

    Bijdrager
    Chillie

    Denk dat je m’n bericht niet helemaal goed begrepen hebt.

    Ik weet dat het op die manier werkt, maar hoe ga ik dat doen?
    Hoe maak ik een javascript die voor de onload de grootste resources laadt?

    Bijdrager
    iJoost

    Wel… als webdesigner, zou ik zeggen, beheers je natuurlijk je JavaScript en schrijf je het gewoon even zelf. Liever dan dat je veroordeeld bent tot de bagger die overal op internet kunt vinden onder de noemer “scriptjes”.

    Heb je trouwens ook al een goed plan waarmee je ervoor gaat zorgen dat Google het nog begrijpt? Of hoeft het spul niet via Google gevonden te worden.;-)

    Bijdrager
    iAlwin

    [code:1:ed68a1bf73]
    <html>
    <head>
    <title>voorbeeld</title>
    </head>
    <body>
    <img src="afbeelding1.jpg" width="1" height="1" style="display:none">
    <img src="afbeelding2.jpg" width="1" height="1" style="display:none">
    <img src="afbeelding3.jpg" width="1" height="1" style="display:none">

    … de rest van je html

    </body>
    </html>
    [/code:1:ed68a1bf73]

    Al zie ik er nog steeds het nut niet van, ook zul je het verschil niet zien. Tenzij je nog internet met 14k4, of dat de plaatjes groter als een mb zijn.

    Bijdrager
    Chillie

    Het belangrijkste ‘probleem’ waar ik mee zat waarom ik een preloader wilde gebruiken was het feit dat ik met enkele grote foto’s werk op de website. Die foto’s zijn soms tot 300kb en komen binnen ‘rollen’ als je begrijpt wat ik bedoel.
    De manier van img-tag hiden met display:none heb ik nu net toegepast. Op de home page laadt ie de foto’s, duurt het laden wat langer, en vervolgens komen op iedere andere pagina de foto’s direct op t scherm.
    Dat vind ik mooier dan wanneer ik iedere pagina opnieuw moet wachten op het laden van de foto’s. Of hebben jullie daar een andere mening over?

    Edit: Correctie. Het werkt op die manier nog steeds niet.

    [code:1:a657ff83ba]
    <img src="headers/headergroenebg1.png" border="0" style="display: none;" />
    <img src="headers/headergroenebg2.png" border="0" style="display: none;" />
    <img src="headers/headergroenebg3.png" border="0" style="display: none;" />
    <img src="headers/headergroenebg4.png" border="0" style="display: none;" />
    <img src="headers/headergroenebg5.png" border="0" style="display: none;" />
    <img src="headers/headergroenebg6.png" border="0" style="display: none;" />
    <img src="headers/headerwittebg1.png" border="0" style="display: none;" />
    <img src="headers/headerwittebg2.png" border="0" style="display: none;" />
    <img src="headers/headerwittebg3.png" border="0" style="display: none;" />
    <img src="headers/headerwittebg4.png" border="0" style="display: none;" />
    [/code:1:a657ff83ba]

    Bijdrager
    iJoost

    Of het me bevalt (om te wachten op 4 MegaByte) bepaal ik wel als ik ooit per ongeluk op je site kom. En dat merk je dan aan het feit dat ik niet verder kom dan de eerste pagina. Succes!;-)

    Bijdrager
    Chillie

    Dat vroeg ik niet.

    Ik vroeg hoe jullie zoiets zouden doen. Ik zit nu met grote afbeeldingen van +/- 300kb per pagina.
    Deze wil ik graag snel of ‘mooi’ laden. Bijv. dat er een loading gifje komt totdat hij klaar is met laden ofzo.
    Vraag me dus af hoe ik zoiets kan fixen, of dat jullie mss betere tips hebben hoe ik om kan gaan met grote afbeeldingen.

    -Robin

    Bijdrager
    iJoost

    Volgens mij vroeg je dat wel:

    ”Chillie”

    Of hebben jullie daar een andere mening over?

    Bijdrager
    praseodym

    Een betere methode zou ‘stil’ preloaden zijn, dus zonder full-page rollover of geanimeerde icoontjes. Zelf heb ik dat toegepast in een slideshow; dan is het handig dat de volgende (of misschien volgende twee) foto’s al geladen zijn zodat je, wanneer je doorklikt, zonder laden de foto te zien krijgt. Dit is iets heel anders dan jij in je hoofd hebt zitten, maar wel een stuk mooier.

    Bijdrager
    Chillie
    ”praseodym”

    Een betere methode zou ‘stil’ preloaden zijn, dus zonder full-page rollover of geanimeerde icoontjes. Zelf heb ik dat toegepast in een slideshow; dan is het handig dat de volgende (of misschien volgende twee) foto’s al geladen zijn zodat je, wanneer je doorklikt, zonder laden de foto te zien krijgt. Dit is iets heel anders dan jij in je hoofd hebt zitten, maar wel een stuk mooier.

    Dank je wel voor je reactie. Ik denk dat ik mijzelf niet helemaal duidelijk heb gemaakt in mijn posts. Ik heb namelijk niks ‘in mijn hoofd’ zitten op de manier van ‘zo wil ik het en hoe moet dat’ maar had wat ideeen uitgedacht en vroeg hoe ik die kon uitwerken of dat hier iemand mss een beter idee heeft.
    Wat jij noemt is inderdaad een beter idee. Stil preloaden. Eerst de hele page erop knallen en dan vast wat rollover menu buttons laden?

    Kan ik dat uitvoeren volgens hetzelfde principe (img tag style display none?) of is daar een hele andere methode voor?

    -Robin

    Bijdrager
    praseodym
    ”Chillie”

    Kan ik dat uitvoeren volgens hetzelfde principe (img tag style display none?) of is daar een hele andere methode voor?

    Dat moet op zich wel werken, zolang je die image tags maar onderaan je pagina zet.

    In Firefox is er een nettere methode geïmplementeerd, ik weet niet of die ook in Safari werkt:
    http://en.wikipedia.org/wiki/Link_prefetching

15 berichten aan het bekijken - 1 tot 15 (van in totaal 15)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.