在过去的几年间，我被高速宽带带来的便利宠坏了。它让浏览网页变得快速，毫无压力。可是，在现实生活中，并不是每一个人都使用光纤，大多数人都还在使用3G网络访问网页。面对实际情况，我该怎么做呢？我想我们一致同意再也没有比干巴巴看看在空白页中缓慢地，一点一点地增加内容更糟糕的事了。为什么在内容渲染页面前我们不告知用户页面正在加载呢？
就是其中之一。还有像懒加载，动态加载等JS方案，也是不错的选择。当然,还有其它不同的方法提示内容加载中，接下来，我会介绍其中的几种方法。
进度指示条
你也许会质疑为什么在内容未加载前模拟内容加载会比完全不展示内容体验好。那好，让我们看一个常见的进度指示工具：进度条。对于一个应用来说，进度条是完全没有一点用处的，但它却是用户体验中非常重要的一部分。
我经常看到一些文件上传的网站，当我选择文件，点击上传文件，竟没有任何文件上传状态的提示，这让我非常沮丧。这会让我觉得我刚刚执行的操作被忽视了。对于加载中的内容也是一样的。如果我点击一个连接，5秒内在打开的页面上看到任何内容，我就会很怀疑我将不会在这个页面看到任何内容。
Facebook 的进度指示条
Facebook通过给占位用的头像、名称、日期和文字段落加上闪烁的渐变动画，给人内容正在加载中的感觉，很好的解决了这个问题。由此，我将转入下一个方法，占位图层。
占位图层
近来，我注意到在内容未加载前使用占位层的技术非常流行，尤其是Guntree和Slack这两个网站。Gumtree网会在赞助人列表加载前优先加载人物信息相关的内容，并且会用线框占据内容展示的区域。
Gumtree 占位图层
另一个很好的使用占位图层的是Slack。Slack内容加载时， 你会看到更接近传统的进度指示（旋转轮）以及内容的轮廓。
Slack 占位图层
用主色占位的懒加载
到目前为止，我所讲的模拟内容加载中的方法，其内容都是可预知的。像Facebook，Gumtree 和Slack它们都知道会显示什么内容，因此能够精确的模拟加载的文件，占据内容显示的位置。但如果所加载的内容是多种多样的，比如图片。又会怎样？
Pinterest dominant colour lazy loading (GIF from
)
Google和Pinterest使用了一项技术，在图片没有完全加载前，用图片的主色作为加载中的图片占位。完整的实现这个效果需要一点点Javascript代码。幸运的是，你可以在
great guide over at manu.ninja
这样的图片主色抓取工具帮你完成主色抓取的工作，你要做的只是简单图片上传。然后你用一个div
包裹加载的'img'，接着在CSS中给这个div
的background-color
属性加载图片的主色即可。
留白
我特别讨厌的一点是稍后加载的内容突然跳入页面，插入的广告尤甚。给插入的内容预留空间是预防这种问题的一个简单的方法。
如果你知道你嵌入的广告会延后一段时间加载，你可以用一个duv
包裹它，这种方法有别于上面提到用主色占位图的方法的是需要给包裹容器设定宽高。通过这种方法，任何围绕在嵌入广告周边的采用相对定位或者静态定位的内容就不会在广告一加载进来就离开原来的位置。 然而，对于响应式设计来说，预测元素的高度是一件困难的事情。但是，如果是像图片这样有特定尺寸比例的对象，元素的框就是可预测的来了。
字体回退
不管我们怎努力，网络字体加载总会有一定的延迟。在字体加载这段时间，内容会按照系统默认的字体显示在用户屏幕上，我们应该展示最接近设计字体的回退方案显示
工具，通过调整字体的样式找到最接近内容展示的字体样式。当时，这种字体本身对内容展示是不完美的。因此，你需要知道什么时候字体加载完毕，以便你能够取消回退字体样式。
案例
我做了一些小demo展示这些技巧的使用。不可否认，我做的这些小demo还有很多需要完善的。希望这些demo可以给你提供一个加载中的方案思路。
<p></p>
In the past few years, I have been spoilt with high-speed broadband that makes browsing the web a stress-free task. But realistically, not everyone has fibre optic, and a lot of people consume web content through 3G. Where am I going with this? Well, I think we can all agree that there is nothing worse than a white page with content slowly populating, so why don’t we fake it until the content makes it?
Although there are ways to provide the most important CSS first, as
, we shouldn’t forget about lazy loaded content or dynamic content that may just take a while to come through. There are various ways we can give the impression that content is loading, and I will go through a few of them in this post.
Progress indicators
You may be questioning why simulating content loading is better than having nothing display at all. Well, let’s take a look at a progress indicating tool that we frequently see: loading bars. Loading bars are essentially useless to an application, but they are, however, a very important part of a user’s experience.
To me, one of the most frustrating things is that I often see on file uploading sites, is selecting a file, and having no indication that it’s actually doing anything once I hit submit. It makes me feel like the action I have just taken was ignored - and it’s the same for loading content. If I’ve clicked on a link to open a page and see nothing for 5 seconds, I begin to question whether I am going to get anything at all.
Facebook progress indicator
Facebook have tackled the issue by giving the impression of loading by having a glistening gradient animating across a placeholder avatar, name, date and paragraph text. Which brings me onto the next point, placeholder layouts.
Placeholder layouts
More recently, I’ve noticed placeholder layouts popping up before any content, notably on Gumtree and Slack. Gumtree prioritises its content by loading in people’s listings before Sponsored Links, and it does so by preserving the space with a wireframe placeholder where the content will go.
Gumtree placeholder layout
Another nice implementation of placeholder layouts is in Slack. Upon loading Slack, you see a more traditional progress indicator (spinning wheel), as well as the outlined layout.
Slack placeholder layout
Dominant colour lazy loading
A lot of what I have spoken about so far involves predictable content; Facebook, Gumtree and Slack all know what content is going to appear, and can create an accurate representation of it. But what if the content is more versatile in its appearance, like an image?
Pinterest dominant colour lazy loading (GIF from
)
A technique that Google and Pinterest use when lazy loading images is taking the dominant colour from an image, and displaying that until the full image can be displayed. Most implementations of this involve a little bit of JavaScript - luckily for you, there is
great guide over at manu.ninja
.
For more predictable images, you can achieve this effect by finding the dominant colour with a tool like
, where you can simply upload an image and it will do the hard work for you. Once you have the colour, wrap your img
in a div
and apply the colour as a background-color
in your CSS - I’ve got a demo of this at the end of this post.
Reserving space
One of my pet hates is pages jumping around because of late loading content - especially annoying when it’s because of an advert. One easy way of preventing this is by reserving space for an element.
If you know that your adverts take a while to load, in a similar way to the dominant colour trick above, wrap them in a div
, but this time with a width and height - that way, any relative or static content around the ad will not move once it has landed.
It can be hard to predict the height of an element with responsive design, however, with things like images that have an obvious aspect ratio, there is
that goes over all of the methods used to maintain aspect ratios.
Fallback font
Despite our best efforts, loading web fonts is always a little delayed. Whilst they make their way onto a user’s screen, we should display the best and closest looking font as a fallback.
FFFFALLBACK bookmarklet
, you can find the closest font and play with font/text CSS properties until you get something that looks close. This by itself isn’t enough, you’d also need a way of knowing once the font has loaded so you could undo the fallback font’s styles.
Demo
I’ve made a small demo to show how some of these techniques can be used. Undeniably, there will be a little more work involved than what I have here, but it gives you an idea of how you can make things look while loading.
<p></p>
