image

在最近的 《Chrome Dev Summit - Key Techniques for Fast Websites》 ，Chrome 团队的成员介绍了，原生的 lazyload 属性即将登陆 Chrome。 一听到 lazyload ，大家可能印象最深的是就是早期瀑布流 Pinterest 网站的的加载效果。效果如下; 实现效果可以参考很早之前写的关于图片的 placeholder《实现类似Pinterest 的图片预加载功能》。这是我们需要通过 JS 来进行一些图片的加载和替换。很开心，Chrome 给了大家尝鲜这个属性的机会，我们在 W3C 的草案中，很早就可以看到对于这个属性的定义; The lazyload attribute is a boolean and IDL attribute that indicates the priority order in which the User Agent should 详情 »

原文地址： https://bitsofco.de/optimising-gifs/ @ireaderinokun 和很多人一样，我喜欢在自己的站点用gif。可以非常好的突出某些功能。比如下面模仿 itunes的轮播 不过我们不得不面对一个问题，就是gif太大，像上面的图片，大概有 11.4mb。最近自己在阅读很多别人的文章时候，也发现，由于自己文章存在gif导致网站加载过慢。gif的使用了无损的算法，每一帧都是一张gif图片，这意味着在图片压缩时候，不会存在信息丢失，这也就是为什么gif这么大。 为了解决这样的问题，我们需要做一些事情。 使用html5 video 感觉惊喜的是采用视频的格式mp4活着webM都所用的文件大小都小于使用无损压缩的 gif正因如此，一个解决方法就是，替换掉gif采用mp4活着webm格式的视频，使用自动播放和循环，这样让人会有gif的样子。 通过给video设置一些属性，我们可以让video去模拟gif播放的效果： autoplay 自动播放，用户无需点击 loop 无限循环播放 muted 尽管gif没有音轨，但是ios自动播放还是需要设置这个属性 playsinline ios safari上确保视频不会全屏 poster 制定视频下载时候的显示的图片 如同下面这个 “视频” 居然 1m不到 😂 将gif 转换成webm你可以到CloudConvert进行转换。 详情 »