ducompsoc / durhack

🎊 DurHack website
https://durhack.com
3 stars 6 forks source link

Front page gallery images need 'loading' skeleton #185

Open Lordfirespeed opened 1 week ago

Lordfirespeed commented 1 week ago

due to image lazy-loading, slides are transparent on initial page load image we should either

SkyePal42 commented 1 day ago

Use progressive image technique? https://www.yzlow.com/progressive-image-loading-with-nextjs

Lordfirespeed commented 1 day ago

the images don't take long to load, next already optimises them fairly well

Images for slides that are out of view by default don't get fetched until the slide is revealed; involving an image of any resolution in the placeholder will not resolve the issue, as those images will still have to be fetched (although fetching them would be quicker than fetching the fullres image) resulting in a lag before anything is displayed

we need a placeholder that relies only on html/css

SkyePal42 commented 1 day ago

what about a durhack logo svg set as the image's background-image so that it is sent/embedded in the html/css and shows first before having the actual image load over it... i think that's how it works... yes it is :) https://codepen.io/boomkiller1119/pen/yLmjrdx w/ throttle 3G and no cache -> can see svg load and then image loads on top original codepen: https://codepen.io/jdsteinbach/pen/aQOZBE

Lordfirespeed commented 1 day ago

yeah that would work but I feel that's gonna look tacky + overcomplicate something simple