Vue项目中使用懒加载 vue-lazy
1.首先准备好需要的图片,放在:src\common\image目录下default.jpgdefault.png懒加载使用的图片的目的:当你页面中的素材图片没有显示出来的时候,先让懒加载的图片显示出来。2.在你的Vue项目中下载vue-lazyloadcnpm install vue-lazyload --save-dev然后,到你的配置文件package.json中查看是否下载成功。"vue-
·
1.首先准备好需要的图片,放在:src\common\image目录下
default.jpg
default.png
懒加载使用的图片的目的:当你页面中的素材图片没有显示出来的时候,先让懒加载的图片显示出来。
2.在你的Vue项目中下载vue-lazyload
cnpm install vue-lazyload --save-dev
然后,到你的配置文件package.json中查看是否下载成功。
"vue-lazyload": "^1.3.3",
3.在入口文件 main.js 中引入vue-lazyload
// 引入懒加载之前,先下载懒加载
// cnpm install vue-lazyload --save-dev
import VueLazyload from 'vue-lazyload';
4.接着在 main.js 中使用vue-lazyload
Vue.use(VueLazyload,{
// 这里表示在加载时要显示的图片的路径
loading: require('common/image/default.jpg')
})
5.到对应的视图层,把原本img标签的 :src 属性改成 v-lazy 指令。
原本是这样:
<img :src="i.picUrl" alt="" />
改成这样:
<img v-lazy="i.picUrl" alt="" />
更多推荐
已为社区贡献9条内容
所有评论(0)