图片渐进式加载(progressive)的一次浅尝辄止的探索
資深大佬 : devwolf 24
以下仅我盲人摸象式的总结,主要是希望 v 佬们实时指出修正。
没有涉及到底层代码的探索,主管提到不用我们重复造轮子,没去仔细研究,但光是“除去底层外如何实现”这点概念就折磨了好一会儿(一天半)。
首先,我刚接到产品提到的这个需求时,自己的脑回路是——我应该去搜索“图片懒加载、图片模糊加载”这些关键字,但是(百度)很歪,这些关键字的结果没有给我提供太多我能用的信息。
一则“medium.com 是如何让图片加载时从模糊到清晰的?”的知乎吸引到了我注意力,https://www.zhihu.com/question/40757342
其中,“不需要加载双图片”的那提到了“递增式编码( Progressive Encoding )”这个概念。
我之所以关注这,因为周五的时候询问了后端,”当时的询问”没问到图片处理参数,导致我一度放弃了找后台提供一份模糊版的图片。
Progressive 这个词,让我在 github 上收货颇丰。因为项目需要 d.ts ,最终选择了 react-progressive-image-loading 这个插件。也因为第一眼我能找到 transitionTime 这样的参数,以及给 img 添加其他属性的入口。
https://github.com/wcandillon/react-progressive-image-loading
“缺点”嘛,两边会有白色光边,这个是找产品妥协了。
但是,
但是这个组件并不能给我提供另一份模糊版的图。
我隔离归来的一位同事给我提供了思路,他以前写图片组件的时候有听主管介绍过,前端可以通过
src={`${item.url}?op=thumb/fit/w/323/h/181`}这样的参数拿到指定尺寸的图片。
与 antd4.x 官方 Image 里一例用阿里云 oss 的不谋而合,那例 url 的”serach”参数长这样
?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200
在我琢磨”渐进加载”的期间,他又试错出了 q 这个 quality 参数,虽然没用上:(
最终,我把处理参数里的宽高都除以了二十四,然后用 css 扩回正常大小,这样就拿到了模糊图片。
“`
<ProgressiveImage
transitionTime={1800}
preview={`${xxx.cover_url}?op=thumb/fit/w/${xxx/24}/h/${xxx/24}`}
src={`${xxx.cover_url}?op=thumb/fit/w/${xxx}/h/${xxx)}`}
render={(src, style) => <img
src={src}
className={styles[“vso-waterfall-cover”]}
alt={item.case_title}
style={Object.assign(style, {
width: xxx,
height: xxx
})} />}
/>
“`
最后,好奇和存疑的点还在那个“图片处理参数”上,似乎是对象存储、cdn 提供的,接手的后端也不清楚可以这么使用。
这次能即时解决这个需求,感觉运气占了很大比例 orz
上周在“能不能只靠前端实现”这个环节调研了好久,
结果上而言确实不用后端同事协助……那个图片处理似乎是别处提供的
没有涉及到底层代码的探索,主管提到不用我们重复造轮子,没去仔细研究,但光是“除去底层外如何实现”这点概念就折磨了好一会儿(一天半)。
首先,我刚接到产品提到的这个需求时,自己的脑回路是——我应该去搜索“图片懒加载、图片模糊加载”这些关键字,但是(百度)很歪,这些关键字的结果没有给我提供太多我能用的信息。
一则“medium.com 是如何让图片加载时从模糊到清晰的?”的知乎吸引到了我注意力,https://www.zhihu.com/question/40757342
其中,“不需要加载双图片”的那提到了“递增式编码( Progressive Encoding )”这个概念。
我之所以关注这,因为周五的时候询问了后端,”当时的询问”没问到图片处理参数,导致我一度放弃了找后台提供一份模糊版的图片。
Progressive 这个词,让我在 github 上收货颇丰。因为项目需要 d.ts ,最终选择了 react-progressive-image-loading 这个插件。也因为第一眼我能找到 transitionTime 这样的参数,以及给 img 添加其他属性的入口。
https://github.com/wcandillon/react-progressive-image-loading
“缺点”嘛,两边会有白色光边,这个是找产品妥协了。
但是,
但是这个组件并不能给我提供另一份模糊版的图。
我隔离归来的一位同事给我提供了思路,他以前写图片组件的时候有听主管介绍过,前端可以通过
src={`${item.url}?op=thumb/fit/w/323/h/181`}这样的参数拿到指定尺寸的图片。
与 antd4.x 官方 Image 里一例用阿里云 oss 的不谋而合,那例 url 的”serach”参数长这样
?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200
在我琢磨”渐进加载”的期间,他又试错出了 q 这个 quality 参数,虽然没用上:(
最终,我把处理参数里的宽高都除以了二十四,然后用 css 扩回正常大小,这样就拿到了模糊图片。
“`
<ProgressiveImage
transitionTime={1800}
preview={`${xxx.cover_url}?op=thumb/fit/w/${xxx/24}/h/${xxx/24}`}
src={`${xxx.cover_url}?op=thumb/fit/w/${xxx}/h/${xxx)}`}
render={(src, style) => <img
src={src}
className={styles[“vso-waterfall-cover”]}
alt={item.case_title}
style={Object.assign(style, {
width: xxx,
height: xxx
})} />}
/>
“`
最后,好奇和存疑的点还在那个“图片处理参数”上,似乎是对象存储、cdn 提供的,接手的后端也不清楚可以这么使用。
这次能即时解决这个需求,感觉运气占了很大比例 orz
上周在“能不能只靠前端实现”这个环节调研了好久,
结果上而言确实不用后端同事协助……那个图片处理似乎是别处提供的
大佬有話說 (12)