问题描述:使用vue开发单页面引用程序,做一个类似朋友圈的项目。列表页图片较多,从列表页到详情页(通过路由),又将图片重新加载了一次,整体图片加载较慢。故,想使用缓存,进入详情页后直接获取图片,如何实现?
已使用方法:已经使用图片懒加载,图片压缩技术
问题描述:使用vue开发单页面引用程序,做一个类似朋友圈的项目。列表页图片较多,从列表页到详情页(通过路由),又将图片重新加载了一次,整体图片加载较慢。故,想使用缓存,进入详情页后直接获取图片,如何实现?
已使用方法:已经使用图片懒加载,图片压缩技术
伪代码
<template>
<ul>
<!--假设item有至少两个属性,一个是详情id,一个是图片pic-->
<li v-for="(item,i) in 你的图片数组" click="点我进入详情(item)">
<!--巴拉巴拉-->
<img :src="item.pic" />
</li>
</ul>
</template>
<script>
methods:{
点我进入详情(item){
// 详情路由自己去读params 或者你传到vuex里也行 甚至sessionStorage也行
this.$router.push("/详情对应的路由",query:{id:item.id},params:{pic:item.pic});
}
}
</script>
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
IMG返回时,在HTTP Header中设置启用浏览器缓存,并设定缓存时间。
如果不理解,读读这篇文章 《彻底弄懂HTTP缓存机制及原理》