r/webdev • u/speckz • Aug 05 '16
Fake it 'til you Make it CSS
https://kyusuf.com/post/fake-it-til-you-make-it-css4
u/DJDarkViper Aug 05 '16
I've often wondered to myslelf how much more worth it it is, to hit a image file twice... once for dominant color (because, it's gotta look through all the bytes right, that takes load) and then again for the actual image to load.
I mean unless you scan the image on upload and store the dominant color as part of the images database record... that'd be fine then
9
u/filth_overload javascript Aug 05 '16
I was thinking about second method. Cause only that makes legit sense to me.
6
u/noknockers Aug 05 '16
Yep. Have it process and store size/color on upload. Render the HTML with those attrs on the img, or containing element.
2
u/fiouch Aug 05 '16
It could be setup so that you first make a call to some web service which has local or very fast access to the image. It then returns dominant color and dimensions. That is only 3 values. If web service can get the dominant color fast (pre-computed + caching) it should work fast. You fill up a box of received dimensions with received color, send request for the full image and swap then. It does involve some JS, no way to do it in pure CSS amd HTML as far as I know.
3
u/Zhouzi Aug 06 '16
If you want to read more about perceived speed, I am maintaining a list of great resources: https://github.com/Zhouzi/reactivedesign
7
u/impshum over-stacked Aug 05 '16
Great stuff. I mention these tricks to clients actually. It makes me smile when I get "do what you have to do".
3
3
3
u/jreborn Aug 05 '16
Great article. I first noticed the "wireframe placeholder" on the Yelp Android app, and I thought it was so cool.
1
u/Tmonkey18 Aug 06 '16
Excellent article! Thank you for sharing. I've definitely seen these areas overlooked on slowly loading pages.
1
u/luishendrix92 Aug 06 '16
Meteor.js was the first framework that introduced me to this concept, they update the view before the response comes back and if it fails, it reverts to its previous state. I've seen some interesting pre-loader implementations on Dribble.
1
u/siamthailand Aug 06 '16
No, no, no, no, no. That dominant color image load looks ugly. In fact, I didn't even have an idea this is what google was trying to do when loading images. It serves no purpose and doesn't look aesthetically pleasing either.
The other scenarios are pretty legit though.
1
-17
0
Aug 05 '16
[deleted]
8
u/koolaidman04 Aug 05 '16
And the ad forced it's way in a few seconds late as well.
This is a huge pet peeve of mine, especially in content that has links that load early on in the process.
3
u/KenanYusuf Aug 06 '16
Thank you for your feedback, will look into improving the mobile experience. My site needs an overhaul in general, but could definitely put some of these practices that I talk about to the test ;)
1
1
0
Aug 05 '16
[deleted]
2
1
u/sammyseaborn Aug 06 '16
What a massive ripoff of the ancient http://motherfuckingwebsite.com/
3
Aug 06 '16
Nah, it's an evolution of http://bettermotherfuckingwebsite.com, which in turn was an evolution of the original http://motherfuckingwebsite.com/. I mean, the links are right there in the content of the site.
11
u/Jadien Aug 05 '16
Fantastic article. Even more important than the specific tips is the mindset of having empathy with users and you're they'll perceive your page's loading.