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

 

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

分享到朋友圈


3条评论

  1. 你好 你的文章非常好 就是我安装了这个插件还是没有效果 不知道是怎么回事 求你的联系方式 帮我看看指点一下 万分感谢
    894587758@qq.com

  2. 可惜,安装插件后,没有任何作用.
    首页和文章页面的gif还是打开时页面时,自动播放.

Comments are closed.