图片预览的实现细节

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章