控制页面里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.

(dv)服务器的初始化及WP权限问题的解决

总之,这件事说起来还是很伟大的。

如果你的(dv)服务器出现Plesk里删除账户后,提示无法建立apache配置文件,同时apache服务无法启动;或以上正常,但装上WP后发现由于权限引发了各种问题,如插件安装不了,无法上传图片等。那你确实应该往下看,下文应该会为你提供解答,为节省时间,直接跳过“起因”部分吧。

起因和初始化

在我MediaTemple的(dv)服务器后台开新用户,结果出现bug,导致新用户无法正常使用服务(原因很蹊跷,我新建了用户C,结果他的默认http目录居然在用户Z的文件夹下)。于是很自然地想把这个用户删除掉,重新创建就该好了吧。可没想到,“灾难”来了,用户删不掉不说,还导致apache服务无法启动,甚至无法重建配置文件……

好吧,因为之前出现过apache服务因某种原因宕掉的情况,驾轻就熟,知道如何处理。但这次显然顽固,接下来就不得不联系(mt)的客服人员。那4天里,包括周末,我和客服们,我们就这样在英文的海洋里无限遨游~

我提供着各种线索和错误提示,他们回复/解决/解释着。我精准的计算着与美国的时差,期盼着客服就在下一条回复中告诉我:EVERYTHING SEEMS OK NOW!  可我严重高估了客服技术团队的水平,在一次又一次的“(dv)是个自助系统,我们提供支持完全是出于礼貌”后,终于给了我最满意的答案:你可以备份好所有数据,之后我们会帮你重装系统。当然,在你做这些事之前,我们不会做任何操作。(直到最终我关掉ticket那一刻,我也坚信,导致这一切的是个bug,原因我不知道,或许恰逢Plesk系统升级。直到最后,客服也没告诉我原因、帮我把问题解决掉。我自己解决了问题,并Thanks them all the same. 当然,也是出于礼貌。)

不到万不得已,不要用“Revert to default”这个功能,后台界面如是说。看来到最后还得自己动手。这是个危险的操作,之前一定做好数据库备份。虽然“Revert”后系统会自动生成一个叫“old”的目录,把原盘内容cp到这里,但数据库是没有的,一定都备份好,一定!

更多