[Javascript] Preloaden van images

[E-jey]

Op dit moment ben ik bezig met een website waarop een grote hoeveelheid grote afbeeldingen staan. Denk aan ongeveer 400kb. Het gaat om die foto's, dat is het hele doel van de site. Afbeeldingen worden full-screen weergegeven. Afhankelijk van een gebruikersactie wordt er een nieuwe foto geladen. Dit is dus elke keer anders.

Mijn probleem zit hem in het cachen van afbeeldingen. Ik wil niet alles meteen laden, want dan moet de gebruiker 30MB downloaden. Maar het stapsgewijs downloaden van afbeeldingen werkt ook niet. Eigenlijk zijn er een paar opties:

1) Alle afbeeldingen via een heleboel <img> tag meteen downlaoden. Het laden van de site duurt lang.
2) Via javascript stapsgewijs downloaden via:

code:

var image = new Image();
image.src = complete_url;

3) Of direct op de pagina ergens in een verstopte div via javascript images weergeven.

Oplossing 1 werkt goed, alle fade overgangen zien er soepel uit. Probleem is de lange laad tijd. Optie 2 en 3 lijken niet te werken. Het faden is niet vloeiend, je ziet dat de afbeelding nog geladen moet worden.

Wat zijn jullie ervaringen met het preloaden van afbeeldingen via javascript? Ongeacht de methode, bij mij worden ze niet gepreload.... Ik heb uren gezocht naar verschillende methodes. Misschien komt het door het aggresieve geheugen beheer van moderne browsers.

[_Thanatos_]

Als je van foto naar foto slide, kun je de volgende alvast inladen zodra de huidige weergegeven wordt. 400KB is nou ook weer niet zo spannend en dat is best binnen een paar seconden geladen.

Je kunt ook eerst een lage kwaliteit laden, en daarna de hoge kwaliteit eroverheen (of, hey, progressive JPEG gebruiken!). De images zijn dan misschien in totaal groter, maar de site kan er sneller door aanvoelen, en dat is waar het om gaat.

[Barryvdh]

Je kan ze ook met javascript laden, door middel van javascript (lazy loading). Eventueel met een timeout, zodat eerst de pagina echt geladen is, of pas als je in de buurt komt van het plaatje. Maar je weet dus niet welke plaatjes mogelijk zijn? Want als je alleen volgende/vorige gaat, kan je dus de volgende en vorige downloaden, of ook die daarvoor/daarna nog.
Je kan dat zelf doen met javascript/jquery, bijvoorbeeld elk plaatje dezelfde placeholder (of kleine resolutie plaatje) geven als src, en een data-* attribuut met het grote plaatje. Dan met javascript je de src veranderen in het grote plaatje. Of je kan kijken naar zoiets: http://www.appelsiini.net/projects/lazyload

[_Erikje_]

^^ lazy loaden FTW

ik heb het zelf op een listerpagina gebruikt (webwinkel) waarbij er 50 tot 100 afbeeldingen geladen werden tijdens het laden. Ik heb dit opgelost door de originele URL op de data-src te zetten (nieuw attribuut) en een scrollevent toegevoegd waar voor elk img wordt gekeken of deze in beeld is. Met een normale internetverbinding merk je niet eens dat er gelazyload wordt...

Voor jQuery kan je het zo krijgen, mootools moet je zelf sleutelen...

Performance verbetering was wel goed te merken btw! Je krijgt een enorme verbetering in de first response tijd van je website.

[E-jey]

Bedankt voor reacties. Progressive JPEG ziet er interessant uit, daar ga ik zeker naar kijken.

De site bestaat uit slides met full screen afbeedingen. De gebruiker kan forward/backward of een nieuwe slide laden. Zodra een gebruiker op een slide klikt, download ik me JS alle afbeeldingen van die slide. Op dit moment worden de afbeeldingen dus al gepreload via js.

Ik maak gebruik van twee fullscreen afbeeldingen die steeds van z-index wisselen. Als een gebruiker ergens op klikt word de achterliggende afbeelding verandert in de nieuwe afbeelding, en de bovenliggende afbeelding weggefade.Wat de volgende (fullscreen) afbeelding gaat worden weet de site pas als de gebruiker ergens op klikt.

Meestal zijn de afbeeldingen van de hele slide al geladen, dus het aanpassen van de achterliggende afbeelding zou snel moeten gaan. Alleen is dit nooit het geval, je ziet de afbeelding opbouwen waardoor het fade effect niet mooi is. Het vreemde is dat dit wel goed werkt op IE9, niet in Chrome en FF.

Volgens mij kun je in FF in Mediainfo bekijken welke afbeeldingen in het geheugen zitten. Die kunnen snel geladen worden. Voor de andere gevallen maakt FF weer een HTTP verbinding om te checken of het de nieuwe versie is. Misschien is de oplossing forceren dat hij de afbeelding uit de cach moet gebruiken.

Ik zal asap de site online zetten

[R4gnax]

E-jey schreef op woensdag 11 april 2012 @ 12:48:
Meestal zijn de afbeeldingen van de hele slide al geladen, dus het aanpassen van de achterliggende afbeelding zou snel moeten gaan. Alleen is dit nooit het geval, je ziet de afbeelding opbouwen waardoor het fade effect niet mooi is.

In dat geval doe je echt iets verkeerd met je preload logica. Je zorgt er toch wel voor dat je pas in een load event handler je image element aan de DOM toevoegt, hè?

[TheNephilim]

_Erikje_ schreef op dinsdag 10 april 2012 @ 21:59:
^^ lazy loaden FTW

ik heb het zelf op een listerpagina gebruikt (webwinkel) waarbij er 50 tot 100 afbeeldingen geladen werden tijdens het laden. Ik heb dit opgelost door de originele URL op de data-src te zetten (nieuw attribuut) en een scrollevent toegevoegd waar voor elk img wordt gekeken of deze in beeld is. Met een normale internetverbinding merk je niet eens dat er gelazyload wordt...

Voor jQuery kan je het zo krijgen, mootools moet je zelf sleutelen...

Performance verbetering was wel goed te merken btw! Je krijgt een enorme verbetering in de first response tijd van je website.

Hey das een leuke om even te onthouden! Thnx! ^^

[Wolfboy]

Het klinkt alsof je een lightbox achtige optie gebruikt, in dat geval... zoek een lightbox script die netjes preload?

Het lijkt me iig dat je niet veel meer dan het volgende + vorige plaatje hoeft te preloaden.

[Bosmonster]

_Erikje_ schreef op dinsdag 10 april 2012 @ 21:59:
^^ lazy loaden FTW

ik heb het zelf op een listerpagina gebruikt (webwinkel) waarbij er 50 tot 100 afbeeldingen geladen werden tijdens het laden. Ik heb dit opgelost door de originele URL op de data-src te zetten (nieuw attribuut) en een scrollevent toegevoegd waar voor elk img wordt gekeken of deze in beeld is. Met een normale internetverbinding merk je niet eens dat er gelazyload wordt...

Voor jQuery kan je het zo krijgen, mootools moet je zelf sleutelen...

Performance verbetering was wel goed te merken btw! Je krijgt een enorme verbetering in de first response tijd van je website.

Wel een crappy plugin die jQuery.. De originele image verneuken en dan eentje in een noscript-tag zetten Hoe moeilijk is het om ondocumentready dit even dit programmatisch te doen en images gewoon te laten werken?

[R4gnax]

Bosmonster schreef op woensdag 18 april 2012 @ 16:44:
[...]

Wel een crappy plugin die jQuery.. De originele image verneuken en dan eentje in een noscript-tag zetten Hoe moeilijk is het om ondocumentready dit even dit programmatisch te doen en images gewoon te laten werken?

Dat gaat niet werken. Browsers beginnen doorgaans plaatjes al te downloaden zodra een <img> tag compleet geparsed is. Requests zullen dan al aan het lopen zijn ver voordat DOMContentLoaded afgevuurd wordt. Hetzelfde probleem heb je o.a. ook als je met responsive images voor mobile aan de gang wilt.

[Barryvdh]

Het idee van die noscript tag is dat het ook werkt zonder javascript. Als je dat niet interessant vind, hoef je niet de javascript fallback te gebruiken.

[ViNyL]

Vindt het ook een rare manier om je images te laden. Je site met gewoon werken zonder javascript en met javascript moet het lazy loaden werken.

Javascript zou iets toe moeten voegen en ik vindt het dan ook raar dat je de originele image vernaggelt en dan een noscript gaat gebruiken om de boel in het gereel te houden.

[Barryvdh]

Schijnbaar ging dat vroeger wel goed, maar laden moderne webbrowsers de plaatjes, voordat je ze kan veranderen met javascript.

Latest version of Lazy Load is not a drop in replacement to your webpage. New browsers load image even if you remove the src attribute with JavaScript. Now you must alter your html code. Put placeholder image into src attribute of your img tag. Real image url should be stored data-original attribute.

Je hebt dus 3 opties;
1. Geen lazyloading
2. Lazyloading door alleen data- attribuut mee te geven, werkt niet zonder javascript
3. Lazyloading met nog een extra noscript tag, als javascript fallback.