Afbeeldingen die niet zichtbaar zijn niet preloaden

[GWTommy]

Ik zit met een probleem. Ik heb een website voor een klantje gemaakt die bestaat uit één pagina met jQuery tabs, maar alle tabs zijn gewoon statisch dus worden ze direct geladen, niet via een AJAX request ed. Nu staan er in de twee tabs die niet openen voor +- 10 Mb aan foto's (kan niet kleiner of anders). Die 10 Mb hoeven niet direct geladen te worden, dus is mijn vraag, is er een kleine tweak die er voor zorgt dat afbeeldingen die bij het openen van de pagina niet zichtbaar zijn nog niet te laten laden en alleen bij het selecteren van een jQuery tab die afbeeldingen laden.

Het is gewoon allemaal simpele jQuery tabs, geen fancy moeilijk gedoe. Dus code hier plaatsen heeft niet echt zin.

Ik heb wat lopen zoeken, maar alles wat ik vind is om juist afbeeldingen wél te preloaden. Zelf heb ik een aantal dingen geprobeerd zoals oa zoiets: http://stackoverflow.com/...3/dont-load-hidden-images (eerste antwoord). Maar dat krijg ik niet toegepast (iemand die dat per tab kan laten gebeuren is mij dus slimmer af).

Ik hoop dat jullie mij kunnen helpen, ik heb er vandaag na een lange dag en nu dus nog het nodige gezoek, de moed niet meer voor. Thnx

[BasieP]

10 mb aan images laden lijkt me voor geen enkele site nuttig.

Maak thumbs en laat die zien. Dan kan de gebruiker dmv de thumb doorklikken naar het origineel.

[MueR]

Wat dacht je van ze niet in de DOM zetten? Als ze er niet zijn, worden ze ook niet geladen.

[Mercatres]

Of je gebruikt een lazyloader.

[GWTommy]

Thumbs. Wat een goed idee, daar had ik nog niet aan gedacht. Helaas is het zo lullig om van die kleine afbeeldingen thumbnails te gaan maken. Ja, het zijn er behoorlijk wat ;-)

Dan mag ik lekker met JS iedere afbeelding nog een in de DOM gaan zetten zodra een tab wordt geopend. Dat is te veel coden en dat is niet mijn bedoeling.

Ik ga straks lazyloader eens proberen. Lijkt een goeie te zijn.

[Stouten]

Dat kan ook geautomatiseerd die thumbs. Heb je er een CMS achter hangen?

[RobIII]

MueR schreef op dinsdag 17 mei 2011 @ 22:18:
Wat dacht je van ze niet in de DOM zetten? Als ze er niet zijn, worden ze ook niet geladen.

offtopic:
Niet in de DOM plaatsen wil niet zeggen dat ze niet geladen worden (check)

GWTommy schreef op dinsdag 17 mei 2011 @ 22:25:
Dan mag ik lekker met JS iedere afbeelding nog een in de DOM gaan zetten zodra een tab wordt geopend. Dat is te veel coden en dat is niet mijn bedoeling.

Je weet dat computers goed zijn in repetitieve taken Als je hier geen stukje code voor kunt schrijven mankeert er iets aan je opzet hoor

[Voor 41% gewijzigd door RobIII op 17-05-2011 22:39]

[GWTommy]

Het zijn allemaal afbeeldingen van kleiner dan 100x100 px die naar iets linken. Dat heeft geen zin om daar thumbs van te maken.
Wat altijd leuk is, je stelt een vraag, krijg je allemaal oplossingen die je juist wilt vermeiden of niet mogelijk zijn, maar blijven ze toch doorgedrukt worden. Geen thumbs.

Het is heel simpel. De afbeeldingen moet pas worden geladen zodra ze echt zichtbaar moeten worden op het scherm.

RobIII schreef op dinsdag 17 mei 2011 @ 22:29:

[...]

Je weet dat computers goed zijn in repetitieve taken Als je hier geen stukje code voor kunt schrijven mankeert er iets aan je opzet hoor

+1 voor die
Het is niet mijn opzet, maar ik ben het zelf. Het is welgeteld deze code die de tabs maakt:

JavaScript:

$("div#tabs").tabs({fx: {opacity: "toggle", duration: "fast"}});

Ik heb geen zin om dat aan te passen.. ;-)
Bovendien moet ik dan weer iets geinigs vinden om de data van de afbeeldingen toch naar de browser te krijgen..

[Voor 42% gewijzigd door GWTommy op 17-05-2011 22:35]

[Stouten]

Had dan het formaat er gelijk bij vermeld. Nu ging iedereen er vanuit dat het grote foto's waren.

[Bosmonster]

Maar dan nog. Je kunt toch gewoon de afbeeldingen even doorlopen en de src leegmaken? Die kun je weer terugzetten met wat slimme scripting als de tab actief is en ze in de viewport komen. Dit is iets dat je veel ziet op lange blogs met veel foto's (kun je ze ook nog mooi infaden enzo).

[RobIII]

GWTommy schreef op dinsdag 17 mei 2011 @ 22:33:
Wat altijd leuk is, je stelt een vraag, krijg je allemaal oplossingen die je juist wilt vermeiden of niet mogelijk zijn, maar blijven ze toch doorgedrukt worden. Geen thumbs.

Wat altijd leuk is: mensen die niet compleet of duidelijk zijn in hun topicstart en er maar van uit gaan dat we een glazen bol hebben. Als je het over 10Mb aan images hebt dan is het nogal wiedes dat mensen van "volledige foto's" uitgaan i.p.v. (what must be een enorme shitload aan) thumbnails. Waarom denk je dat we zo hameren op onze Quickstart en op volledige, duidelijke probleemomschrijvingen?

Ja, je zegt "10 Mb aan foto's (kan niet kleiner of anders)". Toch had je ook even kunnen vermelden dat het dus een enorme berg aan 100x100 afbeeldingen is en had je "foto's" ook "thumbnails" (oid) kunnen noemen. "Kan niet zus of zo" horen we hier dagelijks om vervolgens tot de conclusie te komen dat 't volgens de topicstarter niet zus of zo kan maar het wel degelijk een (of dé) oplossing blijkt te zijn alleen wist de topicstarter dan nét even niet hoe of dat het kon.

[Voor 29% gewijzigd door RobIII op 17-05-2011 22:58]

[GWTommy]

Gelijk RobIII
Maar als ik om een oplossing zus vraag (dus niet klakkeloos thumbnail gaan roepen), waarom krijg ik dan altijd een 'oplossing' zo (thumbnail maken en je probleem is over). Als de mensen die hebben gereageerd (zo aardig waren te reageren) gewoon mijn vraag hadden beantwoord, dan is het toch niet nodig dat ik verder alle oplossing die ik niet wil horen uit ga sluiten in mijn TS. Jammer dat dat niet kan. De volgende keer dat ik een topic start zal ik een lijst gaan aanleggen van dingen die ik niet wil, scheelt weer reacties die ik moet gaan weerleggen zodat er misschien meteen een oplossing wordt aangedragen die het gevraagde (wat nu ook al duidelijk in mijn TS staat) beantwoordt.

[Bosmonster]

Met veel posters gaan mensen hier hetzelfde om als met klanten. Zo zijn ze dat nu eenmaal gewend.

Daarom hebben we ook veel liever dat mensen hun probleem beschrijven, ipv hun beoogde oplossing. Die oplossing is namelijk al iets uit hun koker en vaak helemaal niet de beste mogelijkheid om het daadwerkelijke probleem op te lossen. Veel van de professionals hier zijn dus juist getraind dat soort aangedragen oplossingen te negeren en zich te focussen op het probleem, hoe schaars beschreven ook.

Dat kan voor posters wel irritant zijn, om daarop gewezen te worden, maar je kunt het ook accepteren als goede input, of te weinig informatie over het probleem van jouw kant. Met name dat laatste wordt nog wel eens over het hoofd gezien, met een hoop onnodige aannames en zinloze discussies tot gevolg.

[Voor 7% gewijzigd door Bosmonster op 18-05-2011 08:57]

[OkkE]

GWTommy schreef op woensdag 18 mei 2011 @ 08:07:
[...] Als de mensen die hebben gereageerd (zo aardig waren te reageren) gewoon mijn vraag hadden beantwoord, dan is het toch niet nodig dat ik verder alle oplossing die ik niet wil horen uit ga sluiten in mijn TS. [...]

Je hebt een probleem en wil daar een oplossing voor, prima. Het gebeurd alleen maar al te vaak, hier op GoT maar ook met klanten, dat het probleem is ontstaan door een verkeerd gekozen techniek bijvoorbeeld.

Het is dus slim om volgende keer niet een hele lijst te posten met wat je niet wil, maar uitgebreid je probleem uitleggen en vooral uitleggen waarom jij denkt dat de overige oplossingen (zoals thumbs) niet kunnen.


Over je probleem.

Uit je posts maak ik op dat het verplicht stellen van Javascript geen probleem is? In dat geval kun je redelijk eenvoudig je DOM leeg laten en pas onClick een deel van de images inladen met AJAX. Laten we zeggen de eerste 60. Dan met een script zoals bijv. Twitter gebruikt, kun je onPageScroll de volgende X images inladen.

Maar over hoeveel images praten we per tab? Want een image van 100x100 pixels kan je echt wel klein opslaan (5kb ofzo); dat betekend 2'000 items... Misschien is de gekozen oplossing (images linken naar iets) toch niet het beste in dit geval, en kun je beter tekst links gebruiken?

Bosmonster schreef op woensdag 18 mei 2011 @ 09:13:
Dit kun je ook nog middels progressive enhancement bereiken overigens, door ondocumentready de src leeg te maken van images en even in de data (in het geval van jQuery) of ander attribuut op te slaan.

Daar had ik even niet aan gedacht, inderdaad ook een nette oplossing.

[Voor 23% gewijzigd door OkkE op 18-05-2011 09:18]

[Bosmonster]

Uit je posts maak ik op dat het verplicht stellen van Javascript geen probleem is? In dat geval kun je redelijk eenvoudig je DOM leeg laten en pas onClick een deel van de images inladen met AJAX

Dit kun je ook nog middels progressive enhancement bereiken overigens, door ondocumentready de src leeg te maken van images en even in de data (in het geval van jQuery) of ander attribuut op te slaan.

[Tim_R]

Je kan natuurlijk ook de inhoud van je tabs laden met AJAX zodat je een mooie loadinganimatie kan tonen tot het volledige laden klaar is. Is dat niet nog mooier?

Edit: Zei Okke vanochtend al. Excuses

[Voor 12% gewijzigd door Tim_R op 18-05-2011 11:48]

[GWTommy]

Ik ben vannacht toch maar even niet-lui geweest en ik heb het goed gedaan. Nu worden de afbeeldingen pas in de DOM gezet zodra een tab wordt geklikt. Is toch wel het netst.

Thnx voor de reacties.

[Bosmonster]

GWTommy schreef op vrijdag 20 mei 2011 @ 10:38:
Ik ben vannacht toch maar even niet-lui geweest en ik heb het goed gedaan. Nu worden de afbeeldingen pas in de DOM gezet zodra een tab wordt geklikt. Is toch wel het netst.

Thnx voor de reacties.

Is het niet, aangezien het nu niet meer werkt zonder javascript (en dus ook niet voor zoekmachines). Het is de minst nette oplossing van de aangedragen mogelijkheden.

[GWTommy]

Bosmonster schreef op vrijdag 20 mei 2011 @ 14:15:
[...]


Is het niet, aangezien het nu niet meer werkt zonder javascript (en dus ook niet voor zoekmachines). Het is de minst nette oplossing van de aangedragen mogelijkheden.

Ten eerste werkt de hele site niet zonder JS.
Ten tweede is het niet van belang dat de site wordt gevonden door zoekmachines.
Het is dus de netste oplossing in mijn geval omdat het doet wat het moet, de afbeeldingen pas laden zodra ze zichtbaar moeten worden.