vue 懒加载

最新推荐文章于 2024-09-04 16:59:09 发布

wild_guiqulaixi

最新推荐文章于 2024-09-04 16:59:09 发布

阅读量440

点赞数

分类专栏：实例方法分享文章标签： vue-lazy 懒加载

本文链接：https://blog.csdn.net/allanwhy/article/details/89881027

版权

本文介绍了Vue.js中实现图片懒加载的重要性，详细讲解了如何使用vue-lazyload插件进行配置和使用，包括下载插件、注册、在页面中应用以及注意事项，旨在优化页面性能，减少首页加载时间，提升用户体验。

摘要由CSDN通过智能技术生成

懒加载概念

对于页面有很多静态资源的情况下（比如网商购物页面），为了节省用户流量和提高页面性能，可以在用户浏览到当前资源的时候，再对资源进行请求和加载。

为什么需要懒加载？

像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

简单的说就是：进入首页不用一次加载过多资源，造成用时过长。

图片懒加载

使用vue-lazyload插件：

下载

$ npm install vue-lazyload -D
注册插件

// main.js:
 
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
// 使用方法1:
Vue.use(VueLazyload)
 
// 使用方法2: 自定义参数选项配置
Vue.use(VueLazyload