介绍

监听 scroll 事件实现图片懒加载、预加载

特点：

  • 支持scroll组件或原生事件
  • 支持自定义动画或图片+css
  • 支持添加配置文件
  • 支持预加载
  • 支持设置加载间隔时间和最少过度动画时间
  • 支持scroll节流
  • 支持选项卡切换
  • 支持多加载

下载地址

github: https://github.com/2460392754/uniapp-tools/tree/master/lazyLoad
dcloud: https://ext.dcloud.net.cn/plugin?id=495

更新日志

https://ext.dcloud.net.cn/plugin?id=495&update_log

1.兼容性测试

✅微信小程序
✅h5
✅android
❓其他平台(没测试)

2.目录结构

  1. demo项目
  2. ├── components
  3. │   ├── lazyLoad
  4. │   │   ├── anime                   自定义动画组件
  5. │   │   │   ├── error-1.vue
  6. │   │   │   ├── loading-1.vue
  7. │   │   │   └── loading-2.vue
  8. │   │   ├── AnimeStateSwitch.vue    
  9. │   │   ├── errorExport.vue
  10. │   │   ├── index.vue               lazyLoad组件
  11. │   │   └── loadingExport.vue
  12. │   └── tabs.vue
  13. ├── pages
  14. │   ├── index
  15. │   │   └── index.vue
  16. │   └── type
  17. │       ├── index.vue
  18. │       ├── many.vue
  19. │       ├── native.vue
  20. │       ├── tabs.vue
  21. │       └── vertical.vue
  22. ├── plugins
  23. │   └── lazyLoad
  24. │       ├── js
  25. │       │   ├── core
  26. │       │   │   ├── index.js        数据封装
  27. │       │   │   ├── node.js         节点处理
  28. │       │   │   └── subscribe.js    订阅者模式
  29. │       │   ├── config.js           配置文件
  30. │       │   ├── default.js          部分默认数据
  31. │       │   ├── index.d.ts          
  32. │       │   ├── index.js            导出
  33. │       │   └── tools.js            工具类
  34. │       └── ts
  35. ├── static
  36. │   ├── cat
  37. │   │   ├── 1.jpg
  38. │   │   ├── 2.jpg
  39. │   │   └── 3.jpg
  40. │   ├── dog
  41. │   │   ├── 1.jpg
  42. │   │   ├── 2.jpg
  43. │   │   ├── 3.jpg
  44. │   │   ├── 4.jpg
  45. │   │   ├── 5.jpg
  46. │   │   └── 6.jpg
  47. │   ├── error_1.png
  48. │   ├── error_2.png
  49. │   ├── error.png
  50. │   ├── loading.png
  51. │   └── logo.png
  52. ├── App.vue
  53. ├── main.js
  54. ├── manifest.json
  55. └── pages.json

3.运行流程图

暂无

4.设置插件配置文件(config.js)

参数 类型 必填 默认值 说明
loading Object 是 加载完成之前的替代图片或者动画组件
error Object 加载错误的替代图片或者动画组件
preLoadNum Number 0 预加载图片,单位 px
intervalTime Number 0 图片加载间隔(停顿)时间，单位 ms
minLoadAnimeTime Number 0 最少过度动画时间，单位 ms
throttleTime Number 0 scroll节流时间, 单位 ms
animeSwitchTime Number 500 过度动画时间, 单位 ms
everyLoadQuantity Number 1 每次加载数量
debug Boolean false 开启调试, 控制台打印数据

loading、error对象参数列表

参数 类型 必填 说明
loading.type、error.type String 是 类型，合法值: component、img
loading.name、error.name String 组件名称
loading.path、error.path String 图片路径

config.js

  1. export default {
  2.     loading: {  // 加载完成之前的替代图片或者动画组件
  3.         type: 'component',
  4.         name: 'loading-1'
  5.     },
  6.     // loading: {
  7.     //     type: 'img',
  8.     //     path: '/static/loading.png'
  9.     // },
  10.     // error: {  // 加载错误的替代图片
  11.     //     type: 'img',
  12.     //     path: '/static/error_1.png'
  13.     // },
  14.     error: {
  15.         type: 'component',
  16.         name: 'error-1'
  17.     },
  19.     // 预加载图片,单位 px
  20.     preLoadNum: 100,
  22.     // 图片加载间隔(停顿)时间，单位 ms
  23.     intervalTime: 500,
  25.     // 最少加载动画时间，单位 ms
  26.     minLoadAnimeTime: 500,
  28.     // scroll事件节流时间, 单位 ms
  29.     throttleTime: 200,
  31.     // 动画过度时间，单位 ms
  32.     animeSwitchTime: 500,
  34.     // 每次加载数量
  35.     everyLoadQuantity: 2,
  37.     // 开启调试打印
  38.     debug: false
  39. };

5.插件参数列表(core/index.js)

init(object)

初始化数据，并加载一次首屏的组件，需要等lazyLoad组件加载完成后在初始化，例如从网络请求获取的图片列表

object参数列表

参数 类型 必填 默认值 说明
id String 是 scroll的id
horizontal Boolean false 是否横屏加载
context Object 组件的上下文(this)。封装成组件嵌套使用时，需要填写被封装组件的上下文

scroll()

监听scroll事件

getConfig()

获取config.js和default.js合并后的config数据

setScrollId(string)

切换scroll的Id

destroy()

卸载当前页面数据

6.组件参数列表

object参数列表

参数 类型 必填 默认值 版本 说明
src String 是 图片路径
scrollId String 是 当前组件所在的scroll标签内的id
mode String scaleToFill 图片裁剪、缩放的模式
className String v1.3.2 自定义样式名称

6.设置自定义动画组件

由于小程序的系统限制，没法动态插入vue组件，默认已经添加了1组组件，需要额外配置动画组件配置可能有点麻烦。不喜欢的，也可以直接使用图片+css3替代。

例: error动画组件配置
type的值就是config.js中填写的组件名称

  1. <template>
  2.     <view>
  3.         <error1 v-if="type === 'error-1'"></error1>
  4.     </view>
  5. </template>
  7. <script>
  8. import error1 from './anime/error-1.vue';
  10. export default {
  11.     // 组件名称
  12.     props: {
  13.         type: String
  14.     },
  16.     components: {
  17.         error1
  18.     }
  19. }
  20. </script>

7.如何使用

代码不贴出来了，下载demo查看代码
页面内的多组件切换并使用懒加载，使用方法和 tabs.vue 差不多，自己修改一下代码应该就行了

8.问题

Q: 替代图片加载错误的error组件或者图片加载显示比正常图片显示速度略快。
A: 暂时没有解决方案，也不太想解决。如果有需要，可以自己修改源码

Q: scroll和懒组件被封装后导致抛出异常”scroll样式id错误或未能获取当前属性“
A: 修改组件的上下文

Q:
问题: app端出现只能加载第一次图片
hbuilderX版本: 2.3.3.20190923
出现bug的原因: 到2019.10.11为止，app端暂且不支持Promise.prototype.finally (坑)
A:
v1.3.1已经修复这个bug
已经官方的github反馈这个问题了，待修复！
删除或者注释掉这个方法
{%}L%@(CFFFG~$)`3@_PU(0.png

最后

出现bug了？
遇到无法解决的问题？
直接加我q或者发邮件也行

email: 2460392754@qq.com
qq: 2460392754

欢迎交流或探讨问题！