Verbetering lazy images bij smalle weergave

[HolyPanther]

In het voorbeeldtopic van de lazy images springt de pagina nog steeds alle kanten op als de breedte van het contentveld < 800px is.
Dit komt omdat de max-width van afbeeldingen op 100% komt en de height op auto waardoor de originele hoogte wordt overschreven. Hierna wordt de ratio gebruikt van de ingevoegde afbeelding welke in dit geval 1:1 is(de 1px image)

Oplossing 1: de "1px"-afbeelding in de juiste ratio laten zijn(ofwel voor elke afbeelding die een andere ratio heeft de kleins mogelijke deling maken en die serveren).

Oplossing 2: (mijn voorkeur) de afbeelding wrappen in een container met padding hack met padding-bottom in percentage van de ratio. De afbeelding hierin zal dan weer absoluut gepositioneerd dienen te worden. (de noscript zal hier waarschijnlijk ook in moeten te komen met hogere z-index)


Verder weet ik niet precies hoe de code nu zijn werk doet maar wat bij mijn eigen loader een performance winst geeft is de y-posities van alle te-lazy-loaden-objecten(bij tweakers alleen afbeeldingen?) in een js-object zetten en deze alleen na window load/resize(en evt andere niet native events) bij te werken.
Zo hoef je niet na elke scroll-debounce voor alle afbeeldingen de positie op te zoeken.
Optioneel als je niet zeker bent dat er geen events zijn die je hebt gemist kan je om de x scrollbewegingen een extra refresh van y-posities doen.


Het enige waar ik zelf nog mee zit, bij swipescrolls zit altijd een "ease-out" waardoor de debounce-functie ervoor zorgt dat het heel lang duurt voordat de scrollpositie-check wordt uitgevoerd.
Misschien kan er een scrollsnelheid-check gemaakt worden hiervoor. Hier denk ik zelf ook nog over na ;-)

[crisp]

Op responsive is dat inderdaad nog een probleem. Ik zat zelf in de richting van oplossing 1 te denken, maar dan met een inline SVG-plaatje met de juiste canvas-afmetingen. Dat is een stuk minder bewerkelijk dan de tweede oplossing

Ik ga morgen eens even een experimentje opzetten

[ Voor 10% gewijzigd door crisp op 06-10-2016 16:54 ]

[HolyPanther]

Goed idee. Ik ben benieuwd wat de oplossing wordt.
Ik had zelf al wel gedacht aan .1 met een base64 maar dat is geloof ik niet zo efficient in compressie en paginarendering(serverside), het lost al wel het aantal requests tov losse pixels op.

Waarschijnlijk vervang je dan de svg helemaal met de img. Het zal meevallen maar het zou kunnen dat de repaint zwaarder wordt.
Een collega gaf nog als idee om de img in de svg te zetten. Ik heb verder nog niet nagedacht over de mogelijke problemen hiermee maar klinkt wel fancy.

Ik durf er niks op te wedden maar een mogelijk voordeel bij optie 2 is dat de repaint in theorie lichter kan zijn omdat deze absoluut staat.
Op zich valt bewerkelijk wel mee, het grootste probleem is de extra html rondom afbeeldingen maar dat doen jullie ook al met de noscript-tags.


Ik vind het overigens echt al top werken. Lekker snel ook met jullie servers

[crisp]

Ik bedoel niet dat ik de plaatjes zelf ga inlinen, maar een placeholder construeer met dezelfde afmetingen in plaats van een 1x1 gifje. Met svg is dat eenvoudig:

JavaScript:

// Use a SVG image with the same intrinsic dimensions as the original image
img.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'"
            + " width='" + img.getAttribute('width') + "'"
            + " height='" + img.getAttribute('height') + "'/%3E";

Oplossing staat inmiddels ook online

[crisp]

Lijkt me opgelost. Lazy-loading bij langzaam scrollen gaan we iig ook nog nader onderzoek naar doen