前段时间经常上一些看图的网站,由于网络原因,网站对同一张图片一般提供了三种形式:预览用缩略图,查看用的中等大小图片,收藏用的高质量图片。由此,要下载一张图片,需要经历如下几步:

  1. 在缩略图页面中找到感兴趣的图片
  2. 点击图片,打开查看页面,等待图片完全打开
  3. 点击下载,等待网络响应下载请求,下载高质量图片。
  4. 返回缩略图页面,继续浏览下一张图片。

由于天朝网络不是很好,主要有如下几点体验不好的地方:

  1. 缩略图页面每页只显示一定量的图片,需要手动翻页。
  2. 图片需要一张张的下,每下载一张图片要往返切换好几次页面,步骤2和步骤3需要等待图片打开和下载请求响应,还是非常费时间的。

特别是我一般喜欢下载套图,一口气要下载几十张,这样下起来还是很费劲的。如果让我来设计这个过程,会采用如下方式。

  1. 整个浏览过程只有一个页面,主体部分提供缩略图浏览,左侧和顶部提供导航。(其实它本身就是这样的布局,只不过去掉了大图查看页面)
  2. 浏览缩略图页面时,默认下载一定数量的缩略图,当滚动条快滚动到底部时,自动载入下一页,无需手动翻页。
  3. 在缩略图页面中提供筛选功能,对于筛选掉的图片,不加入批量下载队列(筛选掉的图片可以还原)。
  4. 提供批量下载功能,对当前浏览的所有图片,可以实现批量下载,并且在缩略图上可以查看到下载进度,也能看到整体进度,支持插队下载和取消下载。
  5. 点击缩略图,弹出大图浏览页面(仍然在同一窗口,减少切换窗口)。如果下载了大图,则显示大图;没下载大图,则显示缩略图的原始尺寸(该网站缩略图的原始尺寸其实也不小,但是为了在一页中显示更多图片,是缩小了显示的)。

有了想法后,则有如下几种实现方案:

  1. 通过chrome扩展程序增强原网站
  2. 通过网站提供的API编写WPF桌面程序
  3. 通过网站提供的API编写Metro平板程序

这几种方案各有优劣:

  1. Chrome扩展程序得益于浏览器本身的高性能,对图片浏览有天然的优化,不需要什么额外的优化工作。但chrome扩展也受到浏览器的局限,一方面受限于现有网站结构,api和库函数也较有限,像筛选,插队下载等功能估计实现起来没有桌面程序那么方便。
  2. 桌面程序和Metro平板程序可以使用.net framework api,功能强大,并且自由。但由于其是白手起家,需要对图片的下载,浏览等需要做大量的优化和异常处理。

我不大熟悉web编程,只能写点简单的扩展程序,这种大改动我是有心无力了。便用WPF简单的试了一下,发现WPF要手动实现的功能太多了:WrapPanel不能虚拟化,不支持incremental loading,要实现图片的拖拉,缩放等类似手势的功能比Metro程序麻烦太多。本身图片浏览感觉就比较适合在平板上使用,先暂时用WPF写个简单的批量下载的程序,什么时候等买了windows平板后再试下。