查看详情

WebP 可用性探测

webp 是目前 Web 比较流行的解决方案,相对于 Jpeg/png, 基于 VP8 的压缩,有着非常不错的压缩率。 WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index 比较基础的方法,还是检测 UA 白名单来说,毕竟这些版本都是很早就支持。 这个方法可控性大,而且能够支持 SSR 渲染,在服务端做 UA 判断然后输出对应的图片格式。 当然,常规的另外一种解决方式是,就是远程加载一张 webp 图片观测是否报错 function checkWebPSupport) 详情 »

查看详情

新博客改造的一些有趣的技术要点

最近随着 Ghost 升级,博客主题也做了一些动效的调整,这里面有一些比较有意思的细节,可以和大家分享下。 Ghost-Theme 落地页动画衔接 从首页列表点击进去,实际上是比较简单的 transition 过渡,主要是利用透明度变化和背景图片的放大缩小来完成的。 .cover, .overlay{ content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; height: 100%; background-color: #000; background-position: center center; opacity: .2; background-size: cover; } .cover{ opacity: 0; transition: opacity 1.5s, transform 2s; transition-timing-function: cubic-bezier(0.5, 0, 0.2, 1); background-color: 详情 »

查看详情

使用 JavaScript 探测网络状态

同步 https://medium.com/@JackPu/how-javascript-detect-the-network-status-42f3a6d85f96 在某些情况下,我们的开发者需要指导是否由于网络中断的原因导致 request 失败。 以及我们需要网络重新连接后,我们需要执行一些代码。 naviagtor.onLine naviagtor.onLine 是一个非常好实用的 API. 它可以告诉开发者现在网络是连接还是断开的状态。并且它已经覆盖了绝大多数现代浏览器。 navigator.onLine caniuse figures 而在比较老的 IE8 浏览器,我们小使用 online 事件进行监听。 document.addEventListenner(‘online’, () => { // todo }); document.addEventListenner(‘offline’, () => { // todo }) 网络心跳检测 然后很早的时候,很多浏览器还不支持 naviagtor.onLine。开发者只能通过 XHR 和 Image 发送心跳轮询来判断是否还处在网络连接的状态。 const pingUrl = ‘https://ipv4.icanhazip.com'; 详情 »