search

TK-IT / web

TÅGEKAMMERETs hjemmeside i Django. Både offentlig og intern
https://TAAGEKAMMERET.dk
Other
1 stars 3 forks source link

img med srcset og src loader src uanset om det skal bruges eller ej #37

Closed neic closed 8 years ago

neic commented 8 years ago

I Chrome 48 på OSX henter <img srcset="small.jpg 500w, large.jpg 1000w" src="fallback.jpg"> stadig fallback.jpg selvom den aldrig bliver brugt. Det betyder at image.html loader alle 720px thumbnails selvom de aldrig bliver vist. Jeg ved ikke om det er en bug i vores kode eller i browseren.

martinsand commented 8 years ago

Hvis det er et udbredt problem at browsere ikke kan finde ud af at begrænse sig til at hente en version af billedet, så kan vi overveje at ty til js-løsninger, som f.eks. https://github.com/aFarkas/respimage https://github.com/aFarkas/respimage . Der er flere andre kandidater, men dette var lige den mest lovende af de første tre jeg fandt.

ons. 23. mar. 2016 kl. 23.37 skrev Mathias Dannesbo < notifications@github.com>:

I Chrome 48 på OSX henter < img srcset="small.jpg 500w, large.jpg 1000w" src="fallback.jpg"> stadig fallback.jpg selvom den aldrig bliver brugt. Det betyder at image.html loader alle 720 thumbnails selvom de aldrig bliver vist. Jeg ved ikke om det er en bug i vores kode eller i browseren.

— You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub https://github.com/TK-IT/web/issues/37

neic commented 8 years ago

Dette fixede @furt11 i eeaf5201e4b879dbd6d436a4f38ae265054d2fe2. Selvfølgelig henter browseren src= når der ikke er noget srcset= men et data-srcset=. 🤦

neic commented 8 years ago

Problemet er nu at src= required på <img …>. Et <img data-src="…"> er ikke valid HTML #49.

Jeg er ikke sikker på hvordan vi kan løse det uden at skrive det meste af galleriet om til at hente en .json-filliste asynkront.

martinsand commented 8 years ago

Vi kan tilføje det som en class="class1 class2 slug_12312342423423423423234234232". Så er det bare en mindre ændring af gallery.html og tkgal.js, der skal til.

tir. 3. maj 2016 kl. 14.55 skrev Mathias Dannesbo <notifications@github.com

:

Problemet er nu at src= required på <img …>. Et er ikke valid HTML.

Jeg er ikke sikker på hvordan vi kan løse det uden at skrive det meste af galleriet om til at hente en .json-filliste asynkront.

— You are receiving this because you were mentioned.

Reply to this email directly or view it on GitHub https://github.com/TK-IT/web/issues/37#issuecomment-216518191

neic commented 8 years ago

Jeg forstår ikke din løsning, men har lige regnet en ud selv: Vi tilføjer en tom src samt en data-src med den enlige sti. Så kan tkgal.js bare overskrive den tomme src og fjerne data-src når det er tid til at hente billedet.

Mortal commented 8 years ago

Vil en tom src ikke bare svare til at hente dokumentet selv som billede?

Dvs. <img src="" /> på http://example.com/foo/bar.html vil prøve at vise http://example.com/foo/bar.html som et billede... Ligesom når man sætter <form action="">.

neic commented 8 years ago

Nej, men <img src="" data-src="foo" alt="bar" > er desværre heller ikke valid. Vi kan dog bruge en 1x1px png i base 64. Se https://varvy.com/pagespeed/defer-images.html.

Teknikken hedder desuden 'defer [images]'. Min google-fu fejlede mig tidligere.