nuxt图片懒加载

qq_32496215

已于 2023-08-22 20:06:49 修改

阅读量1.3k

点赞数

分类专栏： Nuxt 文章标签： vue.js javascript 前端

于 2022-07-25 11:15:54 首次发布

本文链接：https://blog.youkuaiyun.com/qq_32496215/article/details/125971253

版权

Nuxt 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在Vue项目中安装和配置Vue Lazy Load插件，以实现图片的懒加载，提高页面性能。通过创建vue-lazyload.js文件并引入nuxt.config.js，设置插件参数如预加载比例、错误处理和尝试次数等，达到优化用户体验的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装插件

npm install vue-lazyload -s

在plugins文件夹新建vue-lazyload.js文件

import Vue from 'vue'
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad, {
  preLoad: 1.33,
  error: '',
  loading: '',
  attempt: 2,
  throttleWait: 500
})

nuxt.config.js文件引入

plugins: [{
    src: '@/plugins/vue-lazyload',
    ssr: false
  }],