前端如何根据网络状态对图像做自适应压缩?

首先讲下我这边自适应压缩的含义:img标签中src存放占位图,data-ori存放原图地址,页面onload后根据网络状态去加载大图(src替换为data-ori的值),服务端已提供多种压缩程度的图片。

其中遇到了两个问题:

问题1:关于网络状态的判断,目前做法是根据Web Performance Api 做下简单的transferSize/responseTime计算。但该Api不能做到完全兼容,并且这个带宽计算过于简单不是很准。求教有没有什么比较好的带宽测速方案(不引入第三方资源)。

问题2:计算得到网络状态后,根据网络状态得到一定的压缩比。在data-ori的图片请求发起时,会在其后带上一个压缩标识,比如 a.jpg?q=100表示加载原图,服务端根据q值大小来提供相应压缩比图片。但是由于url变化了就会有不走缓存的问题:比如本地已经缓存了原图a.jpg?q=100,当前网络状态较差,onload后计算得到q=60,data-ori发起请求会请求a.jpg?q=60而不是走缓存。
不知道有没有好的做法呢?

阅读 749
评论 2018-06-05 提问
    1 个回答

    发一个请求,计算响应时间

    评论 赞赏