控制页面里GIF的播放和停止

网站里偶尔出现一个GIF,可以活跃气氛;但如果主要内容体都是GIF,那将是一场灾难,全动起来,不但不美,而且会拖垮你的浏览器,甚至让机器难以响应,因为它不但耗机器性能,而且由于单个GIF体积很大,页面加载也会变慢。如果你有需求,不得不展示满屏GIF,那么应当考虑到以下几点:

  • 每页只提供有限数量的GIF,而且尽可能让它体积小一点
  • 按需加载/异步加载,随着屏幕滚动,逐渐加载
  • 给GIF加个开关,手动控制它播放/停止

我认为最直接有效的方式就是给GIF加个开关,如果再能配合上前两点,效率会更高,展现效果会更完美。因为我是一名设计师,所以在没有外界开发资源的情况下,只能以有限的开发经验,解决最主要的问题。我的内容引擎是WordPress,如果你跟我一样用WP,我推荐使用插件 GIF Animation Preview 来控制GIF的播放和停止。

GIF Animation Preview

GIF Animation Preview

怎么安装不在这说了,非常简单。启用后,插件设置大多数情况下不用改。默认GIF的交互方式是鼠标hover后播放,再次滑入停止。如果想改成点击,只要在插件设置里,去掉“Start animation on mouse hover”前的选框即可。

插件会自动识别GIF,并且将它们改成第一帧静态图,这样页面加载速度就大大提升了,只有播放时才加载完整GIF。这正是我想要的。同时新版本的插件,还加入了对“post_thumbnail”标签,也就是“特色图像”的支持。

这里需要提一句:如果你发现“特色图像”里的GIF上没有出现开关,还跟往常一样自动播放,那也许是你正在使用的主题对“post_thumbnail”有过修改,可以在 “yourtheme/content.php” 里查看并修改。比如我的一个小站,采用了主题“Pronto”,但“特色图像”里的GIF还是照常播放,插件没起作用,检查后发现,原来“post_thumbnail”被重新定义过:

<?php if ( has_post_thumbnail() && get_theme_mod( 'wpex_blog_entry_thumb', '1' ) == '1' ) { ?>
 <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark" class="loop-entry-img-link">
 <img src="<?php echo aq_resize( wp_get_attachment_url( get_post_thumbnail_id() ), wpex_img('blog_entry_width'), wpex_img('blog_entry_height'), wpex_img('blog_entry_crop') ) ?>" alt="<?php echo the_title(); ?>" />
 </a>
 <?php } ?>

我改了一下,发现用标准模板的标签,插件生效了,然后自己微调下样式就一切OK了:

<?php if ( has_post_thumbnail() ) {
 the_post_thumbnail();
 } ?>

Gifffer.js

这是我最开始采用的方法,研究了一天,后来遇到“GIF Animation Preview”后,就放弃它了。优点嘛,就是小巧轻便,适合任何页面,非WP插件。当然缺点就是让我放弃它的原因:

  • 假开关,GIF第一次需要完整下载且播放一遍后,才出现开关,页面首次加载巨慢
  • 需要手动改代码,把src改成data-gifffer(这对程序来说不是难事,所以就还好)
  • 我的站点是瀑布流,内容Card自适应高度,但取不到图片高度,所以Card会层叠在一起(这是它不可用的主要原因)

gifffer-demo

 

用Google Code Prettify美化WP的代码显示

Blog重新改版,顺便把一直懒得改样式的“代码高亮显示”也优化了一下。需求很简单,只要引用代码时,看起来漂亮点就行。但想达到简洁漂亮这个目标,我发现还挺难的,多数插件展示效果都是很丑的编辑器的即视感。好在有 Google Code Prettify,同时搭配一个以它为基础,并且操作简单的插件,齐活。

使用“WP Code Prettify”插件

可以在WP官网 找到它,当然最简单的方式是直接在WP后台安装插件中,搜索“WP Code Prettify”,安装。插件本身就很轻量化,不会在编辑器上生成额外按钮或者功能键,就是利用现有编辑器,针对<pre>和<code>进行格式化。

Google Code Prettify,除了基本样式外,还支持不同主题,以达到不同的高亮样式,可以在 Color themes for Google Code Prettify 上找到更多主题。“WP Code Prettify”这个插件呢,除了操作简单外,也继承了更换主题的特点,这也是我喜欢这个插件的原因。方法简单,把下载的 Color Themes 上传到 “plugins/wp-code-prettify/css/”里就可以了。现在回到你的后台设置里,选择你喜欢的主题:

让 CSS 显示漂亮,还要多做一步工作,需要引用一个 lang-css.js ,就在“plugins/wp-code-prettify/js/”里,它的作用是更好的辨识 CSS 代码段。这个调用放在 </body> 即可:

<script src="//yoursite.com/wp-content/plugins/wp-code-prettify/js/lang-css.js"></script>

如何使用

把代码片段放在<pre>里,同时手动加上class=”prettyprint”,如:

<pre class="prettyprint">xxx</pre>

如果代码行数较多,建议加上数字,以便于浏览,手动再加一个class=”linenums”,如:

<pre class="prettyprint linenums">
 .prettyprint ol.linenums {
 margin-left: 20px;
 color: #fff;
 }
</pre>

更多效果,参见这里


更新 2018-01-29

由于 WP Code Prettify 插件基本不更新了,而且总是没办法完全生效,所以换了一个插件 Code Prettify,原理都一样,更简单,装上就生效,没有配置后台。如果需要使用 themes,需要手动加一下。方法见:https://wordpress.org/support/topic/styles-themes-support/

发现一个小BUG,设定代码样式后,最终返回的样式都是“1.css”,所以记得把 /skins 下面你要用的样式名改成“1.css”才能生效。

让你的网站支持Retina

这个话题跟我刚刚换了支持 Retina 的笔记本有关。其实早有意识到,只是没 Retina 之前,认为这个工作是别人的事,毕竟现在支持“视网膜屏”的网站还是少数,但作为从业者,应该可以预见,未来3-5年,Retina 将会越来越普及,因为人们浏览网页的媒介正在发生巨大的变化,更多移动终端的介入,无疑会推动这一进程的发展。所以,早做准备,从现在开始,让你的网站支持 Retina!

普通网站/网页

方法有很多,但我发现最有效,也最方便的做法,就是利用 Retinajs ,原理也超简单,页面内调用 retina.js,比如你的图片叫 sample.png ,脚本会寻找同目录下是否有 sample@2x.png ,当屏幕是 Retina 时,脚本会自动切换成 @2x 的图片。如何操作:

首先在页面底部</body>之前,调用脚本:

<script src="/scripts/retina.js" type="text/javascript"></script>

如果你有图片,形如:

<img src="/images/my_image.png" alt="" />

当是 Retina 屏时,图片会被脚本自动替换为以下,当然前提是你传了 @2x 的图片:

<img src="/images/my_image@2x.png" />

行了,搞定。如果你想了解更详细的配置方法,可以到 Retinajs 官网,里面有很详细的说明,操作也非常简单。 Retinajs 官网:http://retinajs.com Retinajs Github:https://github.com/imulus/retinajs (这里有更详细的配置说明)


WordPress

这个就简单啦,推荐使用“WP Retina 2x”的WP插件,在“安装插件”中直接搜索“WP Retina 2x” 插件网站:https://wordpress.org/plugins/wp-retina-2x/


更新 2014-11-05

内容图片在CDN上,Retinajs和插件不生效

我也是后来才发现这个问题。在之前的 WordPress提速方案 说过,我的WP使用了七牛云,所以内容图片都会被同步到云上,通过CDN加速。可是这样的话,js就没法取到@2x图片,也就没法实现内容图片的retina效果。我折腾了两天,开始还以为是配置有问题,后来官网上看也有人提到类似问题,说还需要CDN服务商提供支持之类的……算了,我的更新量也不大,麻烦点能承受。 目前方案:“笨”方法 + Image-set “笨”方法指的是,所有内容图片直接上传@2x大小的图片,然后写死宽(width)高(height)。缺点是编辑时麻烦点,需要手动;优点是门槛低,易上手,而且只需要加载一张图,好管理,流量上其实比retinajs还少加载一张1x的。

<img src="/images/IMG_2014.jpg" width="1000" height="667" />

用 Image-set 来定义logo样式,这种不用经常变动的布局元素,用这种方法最好。

.site-logo { 
 background: url(images/logo.png) no-repeat 0 0;
 background-image: -webkit-image-set(url(images/logo.png) 1x, url(images/logo@2x.png) 2x);
 background-image: -moz-image-set(url(images/logo.png) 1x, url(images/logo@2x.png) 2x);
 background-image: -ms-image-set(url(images/logo.png) 1x, url(images/logo@2x.png) 2x);
 background-image: -o-image-set(url(images/logo.png) 1x, url(images/logo@2x.png) 2x);
}

WordPress提速方案

我的空间用的是Media Temple的VPS,因为服务器在境外,长期以来一直受访问速度的困扰,曾尝试过多种方式提速,但效果都不好。CDN是提速的靠谱方案,无论是境内还是境外的空间,所以找到一个好的CDN就成为事情的关键。之前想过买(mt)的CDN,但据说效果也一般,发挥不出功效,最后还是算了,继续寻觅中。

提速方案分两部分:

wp-speed-plugins@2x

七牛镜像存储插件

这是一个由 我爱水煮鱼 编写的小插件(一如既往的生产 WP 好插件),作用就是把 WordPress 的静态文件镜像化到七牛云上,达到访问加速的目的,也就是用七牛云做 WP 的 CDN。值得一提的是,七牛云注册成功后,每月都会免费获得 10G 存储空间10G 下载流量10W 次 PUT 和 100W 次 GET 的 API 请求,对于个人 Blog 来说绰绰有余。

使用了两天,效果确实挺明显,访问速度前后对比大致如图:

compare@2x

用手机浏览器访问,提速更明显,现在可以肆无忌惮的把文章分享到朋友圈里得瑟了。BTW. 刚配置好后,大概要等10分钟左右,进行初次的静态文件镜像同步,可能会出现短暂页面显示不完整。

Replace Google Fonts 插件

至于这个问题,是由于 Google Open Fonts 抽搐,导致后台加载和一些调用了 Google Fonts 的主题加载缓慢。现在也简单了,苏洋 编写了一个小插件,安装这个插件后,无需配置即刻生效。

Enjoy.

把域名从新网互联转出到Godaddy

终于还是把域名转到Godaddy去了。这个域名还是06年在蓝色理想代理注册的,一直托管在蓝色那,这么多年一直麻烦他,近期问题有点多,实在有点过意不去,还是转出来自己折腾吧。

说实话,开始转移之前做了些功课,发现转移域名是个异常麻烦的事情,具体表现在:获取转移密码操作繁琐,要快递材料给域名商,而且说道多周期长……所以无论心理和生理上我都做足了充分准备才开始操作这件事。但是!事情放佛开展的比较顺利,比预想的要简单一些,在欣慰之前有了很好的心理建设之余,也要感谢下科技发展给老百姓生活带来的便利。

之前网上看过一些教程,说这个万网,那个新网等等转移麻烦之类的,要发纸质的转移材料,还要等很久审批。新网互联转移还是挺方便的,可以在线自助获取转移密码。早该这样了嘛,良性竞争才能带来更好服务。

从新网互联转出(Transfer Out)

登录你的域名管理后台,在面板中找到“域名转移”,跟着操作就行,几分钟服务商就会将转移密码发到你邮箱里。

xinwanghulian

转入Godaddy(Transfer In)

整个流程就是"添加要转移的域名——付费——获取/填写转移ID和安全码——填写转移密码——等待转移完成"

1. 注册完“狗爹”帐号后,在菜单中找到“Transfer Domains”

godaddy-1

2. 输入要转移的域名点“GO”,之后点“Proceed to Checkout”

godaddy-2

3. 去付款,支持支付宝。(在这之前会弹出一个推销产品的层,啥也不选直接”Continue”)

godaddy-3

4. 付款成功后会跳回到Godaddy的一个成功页,从顶导进入“My Account”管理后台。进入“Products——Domains——Transfers”,找到你要转移的域名,点后面的“Launch”按钮。

5. 到这里,就只剩两件事了:一件是填写“Transaction ID”和“Security Code”;接下来输入之前获取到的“转移密码”即可。

6. 最后要做的就是等。Godaddy的处理周期大概7天左右。

整个过程跑下来没想象那么复杂,只是过程中Godaddy的推销比较多,我们就是单纯转入域名的,明确这一点,一路往下走就行了。

—– 06-13 更新 —–

不负众望,我就说没那么顺利嘛。收到新网互联邮件告知转移失败,理由是给我打电话“电话未接通”,问题是根本就没给我打过啊。这种感受似曾相识的,就好像EMS惯用的手法“未妥投”,电话过去会告诉你说“快递员没有联系到我/家中无人”。重新获取转移密码,再来一遍。

—– 06-19 更新 —–

终于Transfer successfully了。自从上次没通过,跟客服联系以后,一直非常留意新网互联会打给我的电话确认,可直到今天中午收到Godaddy确认邮件,都没接到任何电话。不管了,总之转完了,开始新的生活。

—– 07-01 更新 —–

落了一个域名,多亏蓝色提醒,昨天已经办完转移手续,转移中~

—– 07-06 更新 —–

之前被落下的一个域名也转移成功了。