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

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

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

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

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会层叠在一起（这是它不可用的主要原因）