摘要:花瓣是国内最大的图片分享网站,部分用户长期以来都有对个人主页的画板按字母顺序进行归档的需求,但花瓣官方一直没有支持这个能力。
花瓣是国内最大的图片分享网站,部分用户长期以来都有对个人主页的画板按字母顺序进行归档的需求,但花瓣官方一直没有支持这个能力。
最近写了个油猴脚本用于按字母顺序归档主页画板。
仅供学习交流。
效果演示注:由于我自己没几个画板,为了进行演示,这个图是我在别人的主页截取的。实际上使用这个工具时只在自己的主页生效。
优点安装简单
使用方便,直接改变个人主页。不用打开别的软件或者界面。
由于页面更加简单,并对图片渲染做了点优化,性能比原始页面更好。
安装和使用安装chrome扩展TamperMonkey(俗称油猴)
安装花瓣画板归档脚本
打开自己的画板查看效果
按下首字母可以调到对应位置
关闭/卸载
在生效的页面点击TamperMonkey图标可以关闭脚本
点击TamperMonkey选择dashboard可以全局管理脚本
卸载TamperMonkey亦可
开发中的一些总结 1.协议分析容易看到花瓣分段拉取画板的url形如http://huaban.com/xxx/?jp4z1e1x&limit=10&wfl=1&max=42190948
jp4z1e1x这段每次请求是自增的,大概是个sequence之类的东西。chrome查看请求的initiator,点进去可以看到调用的是String.uniqueID,搜一下具体实现是
var m = Date.now(); String.extend("uniqueID", function() { return (m++).toString(36) })
跟猜测一致。不过这里我实际上不需要关注它的实现细节。油猴脚本是可以访问到一样的类型和函数的。
另外这里对请求的header也有要求,需要设置一下
xmlHttp.setRequestHeader("X-Request", "JSON"); xmlHttp.setRequestHeader("X-Requested-With", "XMLHttpRequest"); xmlHttp.setRequestHeader("Accept", "application/json");
最后把limit字段调成需要的大小就好了。
2.图片较多时的渲染性能一开始为了展示小图片,用的是background-image,
background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;
结果发现滚动的时候会卡。
跑了一下性能工具,发现主要是渲染耗时。
改成标签性能会好一些,但是还是有点卡。
那么就只能去处理原始图片了。
一开始想的是通过canvas放缩、裁剪图片,再传给img标签。但是花瓣的图片是禁止跨域的,就是说虽然可以正常展示,但是用canvas去编辑是不行的。
最后发现,花瓣的图片用的是又拍云存的。又拍、七牛这些,都允许针对图片链接加点后缀返回指定的图片。这里用_/both/50x50使得拿到的图片限定大小50*50。使用原始大小的img,一个页面就算有几百张图,也一点都不卡了。
3.快捷键冲突花瓣有定义一些自己的快捷键。比如按T会跳到页面顶部。这和我需要的跳到对应首字母分类的位置是矛盾的。
本来原有的时间监听我们是无法处理的,不过所幸花瓣把大量接口暴露在window.app变量里,找了一下相关的有window.app.hotkey.keyboard.$events和window.app.hotkey.keyboard.options.events,索性直接置为{},花瓣的快捷键逻辑就没了。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/99624.html
摘要:我相信这是很多人共同的感受,所以今天推荐的款书签收藏夹插件印象笔记剪藏插件下载地址印象笔记推出的一款剪藏插件,可以一键收藏各类网页图文,并永久保存进。 今天有个人问我chrome浏览器器上有没有可以稍后阅读的插件啊?她其实想问的就是书签收藏夹插件,因为我们在互联网上一不小心就会看到很多感兴趣的内容,但是时间有限暂时无法阅读,以后保存下来有时间的时候再看。我相信这是很多人共同的感受,所以...
摘要:相比于之前更加高效,易用。同时也是我们个种子用户群呼声最高的。首先的调整就是把智能标注的图标放在了左侧,体现从属关系。戏太足的开发小队设计的初衷,是在不打扰设计师的前提下,提供完整的项目管理与呼声最高的画板功能。 这世上哪有什么天才,有的人只是把大家设计标注、写前端的时间拿来喝咖啡,和思考罢了 showImg(https://segmentfault.com/img/bVUhyy?w=...
阅读 1513·2023-04-26 02:50
阅读 3484·2023-04-26 00:28
阅读 1902·2023-04-25 15:18
阅读 3110·2021-11-24 10:31
阅读 951·2019-08-30 13:00
阅读 968·2019-08-29 15:19
阅读 1730·2019-08-29 13:09
阅读 2944·2019-08-29 13:06