I want to read about that effect you see on pages like Facebook or Airbnb when you open the page and the browser shows you the low fidelity design of page while the actual data loads - so you'll see grey box instead in the place where pictures of the users will be, grey rectangles instead of the text content etc. I've been searching for hours but cannot find anything useful, anyone knows the name of this UX practice?
I believe this is referred to as loading dummy content. There wasn't much info when I searched for it, but I do know that the basic principle is first load a gray background for images and dummy block font then wait for your content to render.
Related
I have a GIF that I will use in a React web app I am building. I want to be able to step through the animation based on the scroll position of the site.
I.e. when I have scrolled through 50% of the page, then I want the gif to display the image at its 50% position.
The gif will be in a div, position:fixed. So it will always live in the top corner of the browser.
The web app is a react app so if it's possible that there's a react library that implements this then that would be great.
Thanks!
There appears to be at least one ready made React implementation for dealing with the interaction with/playing of the GIF that may be able to assist you in your project.
React Gif Player is a React component which creates a GIF player similar to Facebook's implementation. It also comes with a pause function (and an example), which you may be able to use to programatically pause the GIF at corresponding points based on your scroll position.
Gif Frames is a pure JavaScript tool for extracting GIF frames and saving to file. You may be able to create individual frames and correspond frames with certain points of the scroll.
I'm not aware of a gif player that implements exactly what you were hoping for, although others may be able to assist in this regard. If not, you may have to use a combination of, or do a full implementation yourself.
Hopefully this helps.
I have an angularjs application and I am trying to improve its perceptual perfomance on load.
One annoying thing is that the page starts off as a blank page and seems to load everything before page slowly fades in.
I would much rather have some html load and let the xhr data subsequently populate as it comes.
Here's a visual of what I mean:
https://youtu.be/b1GxGJ0BUQU
I checked for the term cloak anywhere in the app and I could not find it. I also checked if there were any resolve attributes on the route and found nothing.
Any advice on improving this perceptual performance would be greatly appreciated!
This fade-in has to be coded somewhere, and we cannot help you find it without the code. You need to understand what triggers that fade-in, so that you could remove it to immediately display the page.
If the code is too big to be understood, one option is to stop the code execution as soon as it starts - for instance add a debugger; statement before the rest - and then use your browser developper tools to inspect the HTML: most likely there is a component full size and plain white on top of the rest, which gets removed at some point. Track its id or class names to find where it is dealt with in your code.
Again these are just advices but we cannot really help you understand a code/HTML that we can't see.
I'm retro-fitting a website for Mobile First Responsive Design (MFRD). My question is - how far do you go with the "Mobile First" part?.
For example - on the homepage I plan on having a list of upcoming events, say 4 or 5. On the mobile version I thought 2 would be enough to save screen real-estate. Should I load the other events in dynamically for the larger views, or should I just hide them since it will only be a few elements anyway?
Loading them dynamically for larger sizes means I have to attach an event to the window resize which typically gets fired every pixel. Even though I can offset that with Timeout, that's still a lot of client side checking is it not (even though it's not like users are constantly resizing their browsers).
I mean, even though you're designing for mobile first, you also have to consider the larger sizes right? Obviously larger JavaScript libraries and other assets that are needed for larger only you want to pull in later and not load for mobile - but how crazy do you want to get with the bandwidth saving?
What is the target market for the website? Are you making a completely responsive website that encapsulates smartphone to desktop? Or are you just concentrating on smartphone to tablet?
Mobile First really just means start your styling and content views at the smallest form factor and work up as the device dimensions get bigger. HTML, CSS (media queries) and jQuery all play a part to expand the UI and manipulate (show/hide) content elements as the browser gets bigger.
Take a look at Smashing Magazine, their responsive layout is one of the most extensive I have seen so far, it will give you an idea of how far you can take the MFRD or DARL (Device Agnostic Responsive Layout) methodologies.
I have an app that show a list of images. The image source is set to a http URL, and the images are downloaded and display automatically.
However, while the app is taking time to download, the image control shows nothing. The user experience is not good this way.
How may I display a loading placeholder image, or a loading gauge, for each of the image control?
While an image is loading, it is drawn transparently. You can use this to your advantage to display an element underneath the image while it is loading. For example, you could have a stock image that is bundled with your XAP that represents a default avatar for example. Or you could display a XAML loading animation. Then when the image is finished loading, it will obscure the element behind it.
Mick's suggestion is a good one if you need to minimize your visual tree and if your scenario allows for a code solution. This suggestion is not perfect but it does make it easier to deal with the case where your placeholder image is unscaled/centered but the loaded image is scaled/stretched.
You could set the image source to your placeholder then when ImageOpened fires, change it to the remote url and let that run it's course.
In addition to the 2 other suggestions (from Josh & Mick) you could display a placeholder in the xaml and then, in code, download the actual desired image in the background using HttpWebRequest. Then when the image has fully downloaded save it to isolated storage and then update the source to the displayed image.
Yes this is more complex than the other solutions but would simplify the visual tree and avoid a blank image being displayed while the image is downloaded.
It would also give you offline caching of images too.
Interesting how many options there are for tackling this problem.
You might also like to consider Ben Gracewood's image caching implementation or what appears to be a development on that idea in his blog comments.
One-time Cached Images in Windows Phone 7 « Ben.geek.nz
Peter Nowaks Mobile Blog - “Intelligent” Image Caching for WP 7
Some background on the discussion leading up to this here if it's of interest.
Image control cache duration?
I am working in a very crucial wpf project.This project is almost finished apart from some points.
I am showing flowdocumentreader which is loaded with dynamic images around 100.
I have one requirement to show page turn effect whenever user navigates to pages in flowdocumentreader.
I have used google and seen lots of example but no body has used flowdocumentreader.
I have also seen wpfBookControl which is not dynamic and it uses xps document.
Please help me to achieve that.
Take a look here or here.
In the WPF Shader Effects Library you have a 'negative' effect which inverts ('turns') the image.