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事件,加载错误图片 如当前图片已损坏