需求及分析
项目是web App.需兼容ios, android.
- img占位图显示
- url被重定向的图片前端缓存
知乎有人提相似的问题: https://www.zhihu.com/questio...,但是没有好的答案.
占位图自然是为了体验.
前端缓存图片,也没啥稀奇，大部分浏览器自己都做好的.
但是考虑到img url是来自服务端redirect的302响应呢?
服务端之所以这么设计，是考虑到图片资源可能被其他cdn分发，总之来自不同的存储,但是考虑兼容这些存储，需要统一url,就是下面的origin url的形式
origin url: xxx/files/5:
redirect to local: /storage/adsaf2qe12.jpg;
or redirect to cdn: /xx.cdn.com/adsaf2qe12.jpg;img标签访问重定向url的过程
1.初次访问 /files/22
GET /files/705%22 HTTP/1.1
Host: xxx:8000 Accept: image/png,image/svg+xml,image/*;q=0.8,video/*;q=0.8,*/*;q=0.5
Connection: keep-alive
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 12_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Faraday Futu re
Accept-Language: zh-cn
Accept-Encoding: gzip, deflate2.返回 302
HTTP/1.1 302 Found
Server: nginx
Content-Type: text/html; charset=UTF-8
Transfer-Encoding: chunked
Connection: keep-alive
X-Powered-By: PHP/7.2.19
Cache-Control: no-cache
Date: Mon, 12 Aug 2019 23:06:06 GMT
Location: http://xxxx:8000/storage/2019/07/26/0650/eWNojunNteHaADwujoHeBPSucm1Ac1DlTENiroXL.jpeg
Expires: Mon, 12 Aug 2019 23:06:05 GMT
X-matching: api_begin
X-matching: api_end注意:
response body是1个页面，就是图片的展示,img的src实现里应该只关心302和Location的url.3.访问真实地址/storage/2019/07/26/0650/xxx.jpeg
GET /storage/2019/07/26/0650/eWNojunNteHaADwujoHeBPSucm1Ac1DlTENiroXL.jpeg HTTP/1.1
Host: 54.223.41.252:8000
Accept: image/png,image/svg+xml,image/*;q=0.8,video/*;q=0.8,*/*;q=0.5
Connection: keep-alive
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 12_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Faraday Future
Accept-Language: zh-cn
Referer: http://xx/news/79?lang=zh&follow=false
Accept-Encoding: gzip, deflate4.返回 200
HTTP/1.1 200 OK
Server: nginx
Date: Mon, 12 Aug 2019 23:06:06 GMT
Content-Type: image/jpeg
Content-Length: 331683
Last-Modified: Fri, 26 Jul 2019 06:50:25 GMT
Connection: keep-alive
ETag: "5d3aa2b1-50fa3"
Expires: Wed, 11 Sep 2019 23:06:06 GMT
Cache-Control: max-age=2592000
X-matching: img_begin
X-matching: img_end
Accept-Ranges: bytes静态资源由nginx返回，带了cache控制的header,正常情况就应该按http缓存的规则来了.
即便是重定位，对chrome这样的强缓存策略的浏览器也没撒问题.
问题就在于，我们的项目是web app. 对于ios的WKWebview的img.src引发的访问，在重定向的前提下是无视缓存的
必须自己来实现前端缓存机制.
占位图
首先,切换url来实现占位图的效果:
![]()
vue的核心思路:
watch: {
//watch images数据，里面包含url
'images': {
handler(newVal) {
// console.log(this.images);
let that = this;
//not video
if( !this.hasVideo) {
//newVal is a array, save url;
newVal.forEach(val => {
// 缓存图片的api,核心在这里
that.apiImg.fetchImg(val.url,response=>{
// base64编码
//response来自cache 或者第1次访问的结果
val.url = response;
});
that.image_urls.push(val.url);
//place holder
val.url = resources.placeHolder;
});
}
this.saved_images = newVal;
},
immediate: true,
// deep: true,
}带前端缓存的img api
前端缓存需要了解下 cookie->localstorage-->indexDB.
我最终选择了localforage库，结合axios-cache-adapter来做请求的缓存.
代码核心功能:
1. 配置localforage,使用INDEXEDDB;
2. 配置axios-cache-adapter
3. 图片转储base64
4. 调用localforage的setItem/getItem;最终实现如下:
import {axios} from '../utils/http';
import localforage from 'localforage'
import memoryDriver from 'localforage-memoryStorageDriver'
import {setup} from 'axios-cache-adapter'
import {setupCache} from 'axios-cache-adapter'
// Register the custom `memoryDriver` to `localforage`
localforage.defineDriver(memoryDriver)
// Create `localforage` instance
const forageStore = localforage.createInstance({
// List of drivers used
driver: [
localforage.INDEXEDDB,
localforage.LOCALSTORAGE,
memoryDriver._driver
],
size: 10000000,
// Prefix all storage keys to prevent conflicts
name: 'img-cache'
});
const cache = setupCache({
//过期时间
maxAge: 15 * 60 * 1000,
store: forageStore
});
const api = axios.create(
{
adapter: cache.adapter
}
);
export default {
fetchImg: async function (url, fn) {
const config = {
responseType: 'arraybuffer'
};
//get from store
await forageStore.getItem(url, (err, value) => {
if (!err && value) {
console.log(forageStore);
console.log('already cached');
fn(value);
} else {
console.log('1st time')
api.get(url, config,).then(async function (response) {
//base64 format
let bas64Url = "data:" + response.headers['content-type'] + ";base64," + btoa(
new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
);
//store
await forageStore.setItem(url, bas64Url, () => {
console.log('set item ok');
return fn(url);
});
}).catch(function (reason) {
console.log(reason);
})
}
});
},
}