keep-alive用来缓存组件,避免了每次点击其他页面都要加载,减少性能消耗和提高用户体验,下图缓存整个路由视图(所有页面),也可以缓存单个组件
图片懒加载用了vue-lazyload组件,npm安装:npm i vue-lazyload -S
我是全局引用的,所以在main.js里引用vue-lazyload
之后在需要懒加载的图片上把src换成v-lazy
效果如图
当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载,因为很多页面,内容很丰富,页面很长,图片较多。比如说各种商城页面。这些页面图片数量多,而且比较大,少说百来K,多则上兆。要是页面载入就一次性加载完毕。估计大家都会等到黄花变成黄花菜了。当用户网速慢时,可以先显示一张loading的动态图,预先让用户有心理准备,否则打开后一片空白会使得用户体验变差。