图片预览的实现细节

Mark一次图片预览功能开发中遇到的问题细节

首先是环境 使用开源js viewer.js做图片预览，具体效果可以查看Viewer.js在线演示

下面是遇到的几个细节

1、不希望暴露文件的路径、不希望暴露固定的路径（即每一次都可以通过该路径访问资源）

使用缓存，使用UUID随机生成一个Key和图片的真实路径放到缓存中做映射，同时将SessionID和这个key做映射

页面上所有的图片统一访问同一个路径只是作为参数的Key不同，后台根据Key获取图片真实路径，读取图片后返回前台

做Session监听，当Session过期后 清理缓存，使Key失效

2、当图片很多时 浏览器卡顿

使用懒加载，在网上找了一个懒加载JS，做一个正在加载中的小体积的Gif图片，默认加载这个Gif图，当要浏览时才加载真实图片

Web开启Gzip压缩（仅限部分格式，某些格式开启压缩后会更大。具体自行百度）

开启缓存，效果是当图片的最后修改时间不变时，直接使用浏览器缓存的图片

3、图片损坏的状况

使用img标签的onerror事件，加载错误图片 如当前图片已损坏