花瓣是国内最大的图片分享网站部分用户长期以来都有对个人主页的花瓣画板不让别人看按字母顺序进行归档的需求,但花瓣官方一直没有支持这个能力
最近写了个油猴脚本用于按字母顺序归档主页花瓣画板不让别人看。
注:由于我自己没几个花瓣画板不让别人看为了进行演示,这个图是我在别人嘚主页截取的实际上使用这个工具时只在自己的主页生效。
- 使用方便直接改变个人主页。不用打开别的软件或者界面
- 由于页面更加簡单,并对图片渲染做了点优化性能比原始页面更好。
- 打开自己的花瓣画板不让别人看查看效果
- 按下首字母可以调到对应位置
-
- 在生效的頁面点击TamperMonkey图标可以关闭脚本
跟猜测一致不过这里我实际上不需要关注它的实现细节。油猴脚本是可以访问到一样的类型和函数的
另外這里对请求的header也有要求,需要设置一下
最后把limit字段调成需要的大小就好了
2.图片较多时的渲染性能
结果发现滚动的时候会卡。
跑了一下性能工具发现主要是渲染耗时。
改成<img>
标签性能会好一些但是还是有点卡。
那么就只能去处理原始图片了
一开始想的是通过canvas放缩、裁剪圖片,再传给img标签但是花瓣的图片是禁止跨域的,就是说虽然可以正常展示但是用canvas去编辑是不行的。
最后发现花瓣的图片用的是又拍云存的。又拍、七牛这些都允许针对图片链接加点后缀返回指定的图片。这里用_/both/50x50
使得拿到的图片限定大小50*50使用原始大小的img,一个页媔就算有几百张图也一点都不卡了。
花瓣有定义一些自己的快捷键比如按T
会跳到页面顶部。这和我需要的跳到对应首字母分类的位置昰矛盾的