本文目录
- 如何才能让vue-router的懒加载使用动态命名
- vue-lazyload 源码解析
- Vue keep-alive本地路由缓存和图片懒加载
- vant图片懒加载图片改大小
- vue antd admin 加载慢
- vue3 + vite实现异步组件和路由懒加载
- vue3图片懒加载之vue3-lazy
- uni-app 图片懒加载
如何才能让vue-router的懒加载使用动态命名
1.懒加载基本懒加载——也称为延迟加载，即在需要的时候才加载（效率低，占用内存小）。所谓懒加载，写的是其get方法.注意：如果是懒加载的话则一定要注意先判断是否已经有了，如果没有那么再去进行实例化2.使用懒加载的好处：（1）不必将创建对象的代码全部写在viewDidLoad方法中，代码的可读性更强（2）每个控件的getter方法中分别负责各自的实例化处理，代码彼此之间的独立性强，松耦合3.代码示例1//2//YYViewController.m3//03-图片浏览器初步4//5//Createdbyappleon14-5-21.6//Copyright(c)2014年itcase.Allrightsreserved.7//89#import"YYViewController.h"1011#definePOTOIMGW20012#definePOTOIMGH30013#definePOTOIMGX6014#definePOTOIMGY501516@interfaceYYViewController()1718@property(nonatomic,strong)UILabel*firstlab;19@property(nonatomic,strong)UILabel*lastlab;20@property(nonatomic,strong)UIImageView*icon;21@property(nonatomic,strong)UIButton*leftbtn;22@property(nonatomic,strong)UIButton*rightbtn;23@property(nonatomic,strong)NSArray*array;24@property(nonatomic,assign)inti;25-(void)change;26@end27282930@implementationYYViewController3132-(void)viewDidLoad33{34;138}139140@end
vue-lazyload 源码解析
/src/lazy.js
定义变量接收实例化参数。
lazy.js 默认导出一个函数，该函数返回一个 Lazy 类，形成闭包，保持对 Vue 的引用。
判断是否支持Webp图片
/src/listener.js
定义变量接收实例化参数。
filter 方法将配置的 filter 对象中的方法执行，接收两个参数，一个为 ReactiveListener 实例，一个为 options 参数对象。
initState 方法给元素添加 data-set 属性，值为图片地址 src，并且定义了图片状态对象 state 。在 Lazy 中已经根据像素比选择了最适配屏幕的图片，顾这里不需要考虑 srcset 属性。另外，我们自定义指令是 v-lazy，到目前为止，还没有给图片的 src 属性赋值。
render 方法，是在 Lazy 中实例化 ReactiveListener 时传递过来的参数。
回过头再来结合 lazy.js 中的 lazyLoadHandler 方法与 ReactiveListener 暴露的方法来看。
/src/lazy-container.js
LazyContainer 的核心是 container 下的选择器selector(默认 img 标签)遍历后调用 lazy 的 add 方法进行绑定，自定义指令 v-lazyload-container。
/src/lazy-component.js
上述实现元素绑定主要是通过自定义指令 v-lazy ， v-lazy-container 。那么 LazyComponent 则是通过注册的 lazy-component 组件，完成绑定，默认渲染成为 div 标签，作为 img 的容器。
/src/lazy-image.js
通 LazyComponent 组件，只不过 LazyImage 注册的 lazy-image 组件，渲染成的是 img 标签，多了 src 属性。
通过自定义指令 v-lazy 将设置背景图的元素或者 img元素，通过 _addListenerTarget 方法收集与数组 TargetQueue 中，并遍历触发懒加载的方法， addEventListener 绑定在该元素上，触发的事件为 lazyLoadHandler ；
在需要懒加载的元素上设置属性 data-src ，这是期望的图片地址(filter 配置项可以预先过滤赋值)，元素上自定义 lazyLoad 表示图片状态(状态变更后，adapter 中触发回调)；
ListenerQueue 数组中收集的是 ReactiveListener 类的实例，主要是用于懒加载不同状态下的图片加载，loading - loaded - error；
当触发 EventListener 了，执行 lazyLoadHandler 方法，根据算法，进入 viewport 后， ReactiveListener 元素如果与触发元素匹配，则进行图片的加载及渲染。
Vue keep-alive本地路由缓存和图片懒加载
keep-alive用来缓存组件,避免了每次点击其他页面都要加载,减少性能消耗和提高用户体验，下图缓存整个路由视图(所有页面)，也可以缓存单个组件图片懒加载用了 vue-lazyload 组件，npm安装：npm i vue-lazyload -S 我是全局引用的，所以在main.js里引用 vue-lazyload 之后在需要懒加载的图片上把src换成v-lazy 效果如图 当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载，因为很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕。估计大家都会等到黄花变成黄花菜了。当用户网速慢时，可以先显示一张loading的动态图，预先让用户有心理准备，否则打开后一片空白会使得用户体验变差。
vant图片懒加载图片改大小
关于路由的懒加载，大家可能知道，就是为了减少第一次加载程序的时候，一次性发送那么多请求减少服务器的压力，图片的懒加载也是这样的原理，放置一次性加载太多的图片给用户体验不好，而且用户也可能不会游览后边图片，比如轮播图，一次性就只加载两张图片，用户往后拨动到第二张的时候 加载第三张图片，算是一种优化的方式
vue antd admin 加载慢
优化方法：1.路由懒加载此方法会把原本打包到一个app.js文件分开成多个js文件打包，这样会减小单个文件的大小，但是不会减小整个js文件夹的大小。通过这种方式可以做到按需加载，只加载单个页面的js文件。2.组件异步加载加载首页的时候，可以先给首页的子组件设置v-if = “false”，在页面初始化的时候再给子组件设置为true，此方法利用了v-if的惰性，setTimeout会使子组件在所有的组件初始化完成并显示后再对其子组件进行初始化。注：在实际开发中还遇到了另一种情况也可以用此方法解决，在入口js中获取了app的token，但是在具体页面中发现不管是在created还是mounted中都是有时候能获取到token，有时候又不可以，是因为执行顺序的原因，可以通过 setTimeout 时间设置为0 这种方法把用到token的请求方法给排到最后，这样就能保证请求方法中有token了。3. 使用异步组件，按需加载es6的写法，`import` 函数会返回一个 `Promise` 对象。这样就实现了组件的按需加载，有需要的时候才会加载这个组件，同样也是优化首屏加载速度的一种方法。4.图片量多的时候可以进行分批的加载vue-lazyload插件，图片懒加载5.外部引入一些插件，不要在vue中引入列入，我在次项目中有用到moment.js这个插件，在vue内部引入后打包的项目大小要比在外部用src的方式引入打包的项目大个300k左右
vue3 + vite实现异步组件和路由懒加载
在 Vue2 中，异步组件和路由懒加载处理使用 import 就可以很轻松实现。但是在 Vue 3.x 中异步组件的使用与 Vue 2.x 完全不同了。本文就详细讲讲 vue3 中 异步组件 和 路由懒加载 的实现。
所以，下面的异步组件声明：
等价于：
Vue 3.x的异步组件加载函数将不再接收 resolve 和 reject ，而且必须始终返回 Promise 。也就是说，工厂函数接收 resolve 回调的方式定义异步组件在 Vue 3.x 不能使用了。
提示： 如果是用 vite 工具来构建项目，在本地开发使用 import 做 路由懒加载 ，可以正常加载，但是会报警告；打包到 生产环境 会报错，页面不会正常展示，可以使用以下两种方法来实现。
欢迎访问： 个人博客地址
vue3图片懒加载之vue3-lazy
关于图片懒加载，之前的vue2项目中一直用的vue-lazyload插件，参考地址： GitHub - hilongjw/vue-lazyload: A Vue.js plugin for lazyload your Image or Component in your application. ，现在vue3项目中，发现作者罢工，不再友好支持了，陪伴了那么久，仍然感谢。
这不能忍，本着不重复造轮子原则，github上一顿搜，找到了 vue3-lazy 这款代替品，看文档使用步骤跟之前类似，简单操作之后，可用，也提升了项目首页加载速度，beautiful，赶紧记录一下使用步骤，方便他人。
参考地址： github地址
点赞加关注，有缘不迷路
uni-app 图片懒加载
实现图片懒加载，并且显示数组中，始终只有3张图片，上下滑动增加的同时，删除最开始的那一张。可以指定从总图片的第几张开始加载 。
要实现上下滑动时的动画效果，我这里用到是uni-app自带swiper组件。同时为了解决增加或删除数组时，会重新渲染，导致动画效果未完成，所以用的是animationfinish页面加载后触发的事件
要实现上下滑动时，动画执行完毕之后，要把执行后的那张图片，始终保持在中间位置。此处，就用到了serper组件中的current，当滑倒第3或者第1张时，给current赋值，使显示的图片始终在第二张的位置。同时滑动添加的同时，也要删除掉最开始的那一张
当总图片数组索引位为0时，则定位到第一张图片。当总图片数组索引位》0时，则定位到第二张图片
通过swiper组件current，可以得到当前页面索引值，减去未滑动前的页面索引值。大于0则是向下滑动，小于0则是向上滑动。
判断当前页面图片是中间的那一张,并且总数组长度大于页面索引值+1时，加载第四张图片。
setTimeout是为了保证删除时，数组是已经添加进去了的
this.atPresentNode.swiperIndex = 1 保证滑动后的图片始终在中间位置
判断滑动之后是否在第一张的位置，并且 总索引位大于0
此处先删除后添加是由于先在头部添加时，会改变显示图片相对于数组的位置，显示图片的位置就向下延后了一位。所以为了避免这种情况，故而先删除，再添加到头部
