上一篇文章简单介绍了如何用GitHub Pages快速制作一个装逼页面。这篇文章来稍许讲一下如何优化。
前文的评论中@诸葛兔 提到了文字背景色过于接近和加载等待的问题，关于这两个问题我有些想法，趁周末有空（单身狗）就稍微改进一下。
-
关于文字背景色过近的问题，真要展开讨论的话，个人觉得其实应该属于政治哲学和玄学范畴的问题。对于咱们这个装逼页面来说的， 页面上的文字只是个点缀，没啥实际用途。（其上的文字是我信手胡诌的，有语法拼写错误请轻拍。）反正价值不高，能不能清晰阅读不重要，只要好看就行，所以稍许调节一下CSS的text-shadow，就算愉快地解决啦～
-
这边真正要讲的是关于加载等待的问题。既然这个世界上逼格有高低，网速有快慢，就必然少不了网页加载要等待的问题。于是呼就做了这个加载等待的页面，这边记录一下制作的思路和过程。
所谓头势不清，干活不灵，先让我来整理一下思路。
打开这个装逼页面，你看到的加载过程是这样的：
- 出现一个转圈圈的加载等待画面。你有没有发现，不知道为什么不用特别说明，看到这样的圈圈转啊转得就本能地觉得这是要我等待的意思？
- 然后转的圈圈淡淡隐去，背景图像逐渐显出，标题、菜单、文字和注脚或自上而下或自下而上地滚出来。
- 到这里整个页面就加载完成了。
转圈圈的加载动画是用CSS3动画写的，你可以在这里看到HTML页面上的div元素（第68行到87行）和这里看到动画的CSS。其实动画的CSS除去头10行左右其他的都是我网上抄来的（没办法我这个人比较懒╮(╯_╰)╭），关键也在最头上的那个定义：
div.cover-container > div {
display: none;
}
上面这个定义，让网页在出现时就隐去页面上的标题、菜单、文字和注脚等除加载动画外的所有其他元素，隐去了我们才能在后面让它们动画地显示呐～。
在这边的选择器我写的是带cover-containerclass的div直下的所有div元素。之所以这么选是因为这个页面上主要用来布局的wrapper div默认用的是display: table;方式显示的，对于后面来应用jQuery的动画有些不利，因为jQuery会给动画的元素加上display: block，这会导致整个页面布局出错。所以首先想到的是不去动负责布局的wrapper div，而是动它里面的子代div元素。
你可以在这边看到一个同样的效果，但是我用了更广泛的body > *的选择器，看这里。
CSS是很强大的利器，但几乎所有利器都是双刃剑，用得好可以打天下，用不好寸步难行。所以读一本技术方面的经典著作还是非常有必要的。关于CSS的话，我不知道你有没有读过这本据说非常经典的好书CSS: The Definitive Guide, 3rd Edition，书中有非常详细的CSS基础，譬如选择器、权重计算、框模型、字体等，可惜的是，因为是本老书，所以对于CSS3只是简略地提了一下，没有很详细地介绍。不过作为一本基础入门书还是相当不错的。关于CSS3有什么好书也欢迎推荐。
接下来说一下关于图片的加载。一般情况下，一个<img>元素在DOM中被创建完赋上src值之后图片就开始加载了，一般我们看到的图片加载会从上到下或从下到上一点点显示出来。为了不让观赏者看到图片的加载过程，或者为了预先加载某些很大的还未显示的图片（如相册的<下一张图>），最简单的处理方法是手动创建一个<img>元素给它赋上src但不附加到DOM里面去，浏览器就会在后台加载图片，加载完成后会触发imageObject.complete事件，你可以用这个事件来响应图片加载完成。加载完成的图片会留在缓存里，随便你怎么用。
在这里我们用jQuery简化处理上述流程，首先创建一个孤立的<img>元素，给它赋上src，然后响应load事件。等图片加载完成后，首先用动画移除加载动画，然后创建新<div>元素并为其的background-image赋上url(之前创建的孤立img的src)值之后作为子代加载到.cover-img中并用动画方式显示。你可以在这里看到源代码。其实这里做得这么复杂就是为了能用到jQuery动画。
关于图片的加载本来想做一个进度条的，不过太复杂了就放弃了。图片加载的进度条基本原理是利用XHR的progress来报告进度，加载完的图片用mime+base64方式显示，方法之复杂令人咂舌。这里有一篇Adobe上叫做HTML5 Image Progress Events的博文，很详细地比较了XHR和HTML5的两种方式。HTML5方式很优雅只可惜现在还不能用。
However, the alternative approach is not yet possible on the web because the HTML image element lacks progress events. The Web Platform team at Adobe is proposing adding image progress events to HTML5 spec and implementing them in browsers. There is a WebKit bug tracking a prototype implementation.
说完了技术再来说关于技术方面的书。关于js方面的书，之前硬着头皮读完了JavaScript: The Definitive Guide, 6th Edition。读着的时候那个叫痛苦啊，头悬梁锥刺股。读完了第一个感受是这书绝对值这价！没读过那根本就不能叫懂javascript！绝对能和国学4经典、外国文学10大经典等齐名！绝壁应该编入人生必读100本书之中！读完这本书之后再去看其他网站的js代码，那感觉真像张无忌习得九阳神功做基础轻轻松松将乾坤大挪移练至十层般爽快～那些代码读起来都不在话下～
这篇文章到这里就准备要结束了，口感舌燥的我虽然很不情愿但还是不得不再写个结尾。接下来有空的话我准备再写一篇文章，讲一下我是如何用Lightroom调教照片并用Gimp优化图片大小、以及用Jekyll在GitHub Pages上快速建立页面的。
TODO:
- 下一篇：《GitHub Pages装逼速成指南（150分钟版）》
网友评论