@ohos-ports/vue3-lazyload 0.0.0-stage → 0.4.2-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +344 -2
- package/dist/config.d.ts +6 -0
- package/dist/constant.d.ts +2 -0
- package/dist/dom.d.ts +8 -0
- package/dist/hooks.d.ts +3 -0
- package/dist/index.cjs +1 -0
- package/dist/index.d.ts +16 -0
- package/dist/index.iife.js +1 -0
- package/dist/index.mjs +339 -0
- package/dist/lazy-component.d.ts +22 -0
- package/dist/lazy.d.ts +18 -0
- package/dist/logger.d.ts +5 -0
- package/dist/observer.d.ts +19 -0
- package/dist/types.d.ts +51 -0
- package/dist/util.d.ts +4 -0
- package/package.json +65 -4
package/README.md
CHANGED
|
@@ -1,3 +1,345 @@
|
|
|
1
|
-
#
|
|
1
|
+
# vue3-lazyload
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
<div style="display:flex;width:100%;justify-content:center;">
|
|
4
|
+
<img src="https://img.shields.io/npm/v/vue3-lazyload" />
|
|
5
|
+
<img src="https://img.shields.io/github/package-json/dependency-version/murongg/vue3-lazyload/dev/rollup/develop" />
|
|
6
|
+
<img src="https://img.shields.io/npm/dw/vue3-lazyload" />
|
|
7
|
+
</div>
|
|
8
|
+
<br />
|
|
9
|
+
<div style="display:flex;width:100%;justify-content:center;">
|
|
10
|
+
<img src="https://img.shields.io/travis/murongg/vue3-lazyload" />
|
|
11
|
+
<img src="https://img.shields.io/bundlephobia/min/vue3-lazyload" />
|
|
12
|
+
<img src="https://img.shields.io/github/repo-size/murongg/vue3-lazyload" />
|
|
13
|
+
<img src="https://img.shields.io/npm/l/vue3-lazyload" />
|
|
14
|
+
<img src="https://img.shields.io/github/issues/murongg/vue3-lazyload" />
|
|
15
|
+
<img src="https://img.shields.io/github/issues-pr/murongg/vue3-lazyload" />
|
|
16
|
+
</div>
|
|
17
|
+
<br />
|
|
18
|
+
A Vue 3 lazyload plugin for images and component subtrees.
|
|
19
|
+
<br />
|
|
20
|
+
|
|
21
|
+
## 🚀 Features
|
|
22
|
+
- ⚡ **0 runtime dependencies:** No worry about your bundle size
|
|
23
|
+
- 🦾 **Type Strong:** Written in Typescript
|
|
24
|
+
- 🌎 **Vue 3 only:** Built for Vue 3 applications and libraries
|
|
25
|
+
- 🌎 **Browser support:** Use it through CDN
|
|
26
|
+
- 😊 **Support Hook:** useLazyload
|
|
27
|
+
- 🧱 **Support LazyComponent:** Defer mounting slot content until it enters the viewport
|
|
28
|
+
- 🔁 **Support modes and events:** Keep content mounted once loaded, or mount/unmount with visibility events
|
|
29
|
+
|
|
30
|
+
## 📎 Installation
|
|
31
|
+
```sh
|
|
32
|
+
$ npm i @ohos-ports/vue3-lazyload
|
|
33
|
+
# or
|
|
34
|
+
$ yarn add @ohos-ports/vue3-lazyload
|
|
35
|
+
# or
|
|
36
|
+
$ pnpm add @ohos-ports/vue3-lazyload
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## 🌎 CDN
|
|
40
|
+
|
|
41
|
+
CDN: `https://unpkg.com/@ohos-ports/vue3-lazyload`
|
|
42
|
+
```html
|
|
43
|
+
<script src="https://unpkg.com/@ohos-ports/vue3-lazyload"></script>
|
|
44
|
+
<script>
|
|
45
|
+
Vue.createApp(App).use(VueLazyLoad)
|
|
46
|
+
...
|
|
47
|
+
</script>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## 👽 Usage
|
|
51
|
+
|
|
52
|
+
This package supports Vue 3 only.
|
|
53
|
+
|
|
54
|
+
main.js:
|
|
55
|
+
|
|
56
|
+
```js
|
|
57
|
+
import { createApp } from 'vue'
|
|
58
|
+
import VueLazyLoad from '@ohos-ports/vue3-lazyload'
|
|
59
|
+
import App from './App.vue'
|
|
60
|
+
|
|
61
|
+
const app = createApp(App)
|
|
62
|
+
app.use(VueLazyLoad, {
|
|
63
|
+
// options...
|
|
64
|
+
})
|
|
65
|
+
app.mount('#app')
|
|
66
|
+
```
|
|
67
|
+
App.vue:
|
|
68
|
+
```html
|
|
69
|
+
<template>
|
|
70
|
+
<img v-lazy="your image url" />
|
|
71
|
+
</template>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Which API Should I Use?
|
|
75
|
+
|
|
76
|
+
| API | Best for | What it controls |
|
|
77
|
+
| --- | --- | --- |
|
|
78
|
+
| `v-lazy` | Regular template images | Swaps image `src` when the element becomes visible |
|
|
79
|
+
| `useLazyload` | Images managed inside component logic | Reuses plugin defaults and lets the component drive source updates |
|
|
80
|
+
| `LazyComponent` | Expensive cards, charts, or nested subtrees | Delays mounting a whole slot subtree |
|
|
81
|
+
|
|
82
|
+
`v-lazy` and `useLazyload` are image-oriented. `LazyComponent` is for component-level lazy mounting.
|
|
83
|
+
|
|
84
|
+
### v-lazy use object params
|
|
85
|
+
|
|
86
|
+
```vue
|
|
87
|
+
<template>
|
|
88
|
+
<img v-lazy="{ src: 'your image url', loading: 'your loading image url', error: 'your error image url' }">
|
|
89
|
+
</template>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### Use lifecycle
|
|
93
|
+
|
|
94
|
+
In main.js
|
|
95
|
+
|
|
96
|
+
```js
|
|
97
|
+
import { createApp } from 'vue'
|
|
98
|
+
import VueLazyLoad from '@ohos-ports/vue3-lazyload'
|
|
99
|
+
import App from './App.vue'
|
|
100
|
+
|
|
101
|
+
const app = createApp(App)
|
|
102
|
+
app.use(VueLazyLoad, {
|
|
103
|
+
loading: '',
|
|
104
|
+
error: '',
|
|
105
|
+
lifecycle: {
|
|
106
|
+
loading: (el) => {
|
|
107
|
+
console.log('loading', el)
|
|
108
|
+
},
|
|
109
|
+
error: (el) => {
|
|
110
|
+
console.log('error', el)
|
|
111
|
+
},
|
|
112
|
+
loaded: (el) => {
|
|
113
|
+
console.log('loaded', el)
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
})
|
|
117
|
+
app.mount('#app')
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
or
|
|
121
|
+
|
|
122
|
+
In xxx.vue
|
|
123
|
+
> Do not pass a whole reactive object as `v-lazy="lazyOptions"`. Use inline object fields instead, otherwise Vue cannot track nested changes the way you expect.
|
|
124
|
+
|
|
125
|
+
```vue
|
|
126
|
+
<script>
|
|
127
|
+
import { reactive } from 'vue'
|
|
128
|
+
export default {
|
|
129
|
+
name: 'App',
|
|
130
|
+
setup() {
|
|
131
|
+
const lazyOptions = reactive({
|
|
132
|
+
src: 'your image url',
|
|
133
|
+
lifecycle: {
|
|
134
|
+
loading: (el) => {
|
|
135
|
+
console.log('image loading', el)
|
|
136
|
+
},
|
|
137
|
+
error: (el) => {
|
|
138
|
+
console.log('image error', el)
|
|
139
|
+
},
|
|
140
|
+
loaded: (el) => {
|
|
141
|
+
console.log('image loaded', el)
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
})
|
|
145
|
+
return {
|
|
146
|
+
lazyOptions,
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
</script>
|
|
151
|
+
|
|
152
|
+
<template>
|
|
153
|
+
<img v-lazy="{ src: lazyOptions.src, lifecycle: lazyOptions.lifecycle }" width="100">
|
|
154
|
+
</template>
|
|
155
|
+
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
### Use Hook
|
|
159
|
+
|
|
160
|
+
```vue
|
|
161
|
+
<script lang="ts">
|
|
162
|
+
import { ref } from 'vue'
|
|
163
|
+
import { useLazyload } from '@ohos-ports/vue3-lazyload'
|
|
164
|
+
|
|
165
|
+
export default {
|
|
166
|
+
name: 'App',
|
|
167
|
+
setup() {
|
|
168
|
+
const src = ref('https://picsum.photos/id/64/720/420')
|
|
169
|
+
const lazyRef = useLazyload(src, {
|
|
170
|
+
lifecycle: {
|
|
171
|
+
loading: () => {
|
|
172
|
+
console.log('loading')
|
|
173
|
+
},
|
|
174
|
+
error: () => {
|
|
175
|
+
console.log('error')
|
|
176
|
+
},
|
|
177
|
+
loaded: () => {
|
|
178
|
+
console.log('loaded')
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
})
|
|
182
|
+
|
|
183
|
+
function switchSource() {
|
|
184
|
+
src.value = 'https://picsum.photos/id/65/720/420'
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
return {
|
|
188
|
+
lazyRef,
|
|
189
|
+
switchSource,
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
</script>
|
|
194
|
+
|
|
195
|
+
<template>
|
|
196
|
+
<img ref="lazyRef" class="image" width="320">
|
|
197
|
+
<button @click="switchSource">
|
|
198
|
+
Switch source
|
|
199
|
+
</button>
|
|
200
|
+
</template>
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
If you install the plugin with `app.use(VueLazyLoad, options)`, `useLazyload()` will reuse the injected lazyload instance by default. If you pass local options to the hook, they are merged on top of the plugin defaults without mutating the global instance.
|
|
204
|
+
|
|
205
|
+
### Use LazyComponent
|
|
206
|
+
|
|
207
|
+
Use `LazyComponent` when the expensive part is not an image but a whole component subtree.
|
|
208
|
+
|
|
209
|
+
```vue
|
|
210
|
+
<template>
|
|
211
|
+
<LazyComponent
|
|
212
|
+
:delay="220"
|
|
213
|
+
mode="once"
|
|
214
|
+
>
|
|
215
|
+
<template #placeholder>
|
|
216
|
+
<div class="card-skeleton">
|
|
217
|
+
Loading card...
|
|
218
|
+
</div>
|
|
219
|
+
</template>
|
|
220
|
+
|
|
221
|
+
<ExpensiveChart />
|
|
222
|
+
</LazyComponent>
|
|
223
|
+
</template>
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
`LazyComponent` supports two modes:
|
|
227
|
+
|
|
228
|
+
- `mode="once"`: mount the slot the first time it becomes visible, then keep it mounted
|
|
229
|
+
- `mode="visible"`: mount on enter, unmount on leave, and restore the placeholder
|
|
230
|
+
|
|
231
|
+
Example with visibility events:
|
|
232
|
+
|
|
233
|
+
```vue
|
|
234
|
+
<script setup lang="ts">
|
|
235
|
+
import { ref } from 'vue'
|
|
236
|
+
|
|
237
|
+
const visible = ref(false)
|
|
238
|
+
const mounts = ref(0)
|
|
239
|
+
const unmounts = ref(0)
|
|
240
|
+
</script>
|
|
241
|
+
|
|
242
|
+
<template>
|
|
243
|
+
<LazyComponent
|
|
244
|
+
mode="visible"
|
|
245
|
+
:delay="180"
|
|
246
|
+
@visible-change="visible = $event"
|
|
247
|
+
@load="mounts += 1"
|
|
248
|
+
@unload="unmounts += 1"
|
|
249
|
+
>
|
|
250
|
+
<template #placeholder>
|
|
251
|
+
<div>Waiting for viewport entry...</div>
|
|
252
|
+
</template>
|
|
253
|
+
|
|
254
|
+
<ExpensiveChart />
|
|
255
|
+
</LazyComponent>
|
|
256
|
+
|
|
257
|
+
<p>Visible: {{ visible }}</p>
|
|
258
|
+
<p>Mounts: {{ mounts }}</p>
|
|
259
|
+
<p>Unmounts: {{ unmounts }}</p>
|
|
260
|
+
</template>
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
`LazyComponent` is SSR-safe by default: the server render starts from the placeholder and the real slot content mounts only after client-side visibility is known.
|
|
264
|
+
|
|
265
|
+
### LazyComponent Props
|
|
266
|
+
|
|
267
|
+
| prop | description | default | type |
|
|
268
|
+
| --- | --- | --- | --- |
|
|
269
|
+
| `mode` | Mount strategy for the default slot | `'once'` | `'once' \| 'visible'` |
|
|
270
|
+
| `delay` | Time in milliseconds the component must remain visible before mounting | inherited from plugin options | `number` |
|
|
271
|
+
| `observerOptions` | IntersectionObserver options for the wrapper | inherited rootMargin/threshold defaults | `IntersectionObserverInit` |
|
|
272
|
+
| `tag` | Root element tag rendered by `LazyComponent` | `'div'` | `string` |
|
|
273
|
+
|
|
274
|
+
### LazyComponent Events
|
|
275
|
+
|
|
276
|
+
| event | payload | description |
|
|
277
|
+
| --- | --- | --- |
|
|
278
|
+
| `visible-change` | `boolean` | Fires whenever the wrapper enters or leaves the viewport |
|
|
279
|
+
| `load` | none | Fires when the default slot is mounted |
|
|
280
|
+
| `unload` | none | Fires when `mode="visible"` unmounts the default slot |
|
|
281
|
+
|
|
282
|
+
#### Use css state
|
|
283
|
+
|
|
284
|
+
There are three states while image loading.
|
|
285
|
+
You can take advantage of this feature, make different css controls for different states.
|
|
286
|
+
|
|
287
|
+
- `loading`
|
|
288
|
+
- `loaded`
|
|
289
|
+
- `error`
|
|
290
|
+
|
|
291
|
+
```html
|
|
292
|
+
<img src="..." lazy="loading">
|
|
293
|
+
<img src="..." lazy="loaded">
|
|
294
|
+
<img src="..." lazy="error">
|
|
295
|
+
```
|
|
296
|
+
```css
|
|
297
|
+
<style>
|
|
298
|
+
img[lazy=loading] {
|
|
299
|
+
/*your style here*/
|
|
300
|
+
}
|
|
301
|
+
img[lazy=error] {
|
|
302
|
+
/*your style here*/
|
|
303
|
+
}
|
|
304
|
+
img[lazy=loaded] {
|
|
305
|
+
/*your style here*/
|
|
306
|
+
}
|
|
307
|
+
</style>
|
|
308
|
+
```
|
|
309
|
+
|
|
310
|
+
### Delay loading of images
|
|
311
|
+
|
|
312
|
+
To avoid loading images that are only shortly visible (e. g. fast scrolling through list of images), a delay in milliseconds can be configured.
|
|
313
|
+
If a delay is set, an image is only loaded if it stays visible for the specified amount of time.
|
|
314
|
+
|
|
315
|
+
Set delay in object parameter:
|
|
316
|
+
|
|
317
|
+
```vue
|
|
318
|
+
<template>
|
|
319
|
+
<img v-lazy="{ src: 'your image url', loading: 'your loading image url', error: 'your error image url', delay: 500 }">
|
|
320
|
+
</template>
|
|
321
|
+
```
|
|
322
|
+
|
|
323
|
+
## 📁 Options
|
|
324
|
+
|
|
325
|
+
| key | description | default | type |
|
|
326
|
+
| --------------- | ----------------------------------------------------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
|
|
327
|
+
| loading | The image used when the image is loaded | - | string |
|
|
328
|
+
| error | The image used when the image failed to load | - | string |
|
|
329
|
+
| observerOptions | IntersectionObserver options | { rootMargin: '0px', threshold: 0 } | [IntersectionObserverInit](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) |
|
|
330
|
+
| log | Do print debug info | true | boolean |
|
|
331
|
+
| logLevel | Log level | error | 'error' \| 'warn' \| 'info' \| 'debug' \| 'log' |
|
|
332
|
+
| lifecycle | Specify state execution function | - | [Lifecycle](#Lifecycle) |
|
|
333
|
+
| delay | Time in milliseconds an image has to stay visible before loading starts | 0 | number |
|
|
334
|
+
|
|
335
|
+
## ⛱ Lifecycle Hooks
|
|
336
|
+
|
|
337
|
+
| key | description |
|
|
338
|
+
| ------- | ---------------- |
|
|
339
|
+
| loading | Image loading |
|
|
340
|
+
| loaded | Image loaded |
|
|
341
|
+
| error | Image load error |
|
|
342
|
+
|
|
343
|
+
## [Contributors](https://github.com/murongg/vue3-lazyload/graphs/contributors)
|
|
344
|
+
|
|
345
|
+
|
package/dist/config.d.ts
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { LazyOptions, NormalizedLazyValue, ResolvedLazyOptions, ValueFormatterObject } from './types';
|
|
2
|
+
export declare const DEFAULT_OBSERVER_OPTIONS: IntersectionObserverInit;
|
|
3
|
+
export declare const DEFAULT_OPTIONS: ResolvedLazyOptions;
|
|
4
|
+
export declare function mergeLazyOptions(current: ResolvedLazyOptions, overrides?: LazyOptions): ResolvedLazyOptions;
|
|
5
|
+
export declare function resolveLazyOptions(options?: LazyOptions): ResolvedLazyOptions;
|
|
6
|
+
export declare function normalizeLazyValue(value: ValueFormatterObject | string, options: ResolvedLazyOptions): NormalizedLazyValue;
|
package/dist/dom.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { LifecycleEnum, Lifecycle, NormalizedLazyValue } from './types';
|
|
2
|
+
type LogHandler = (message?: unknown, ...optionalParams: unknown[]) => void;
|
|
3
|
+
export declare function applyLifecycleState(life: LifecycleEnum, lifecycle: Lifecycle, el?: HTMLElement): void;
|
|
4
|
+
export declare function applyLoadingState(el: HTMLElement, value: NormalizedLazyValue): void;
|
|
5
|
+
export declare function applyLoadedState(el: HTMLElement, lifecycle: Lifecycle): void;
|
|
6
|
+
export declare function applyErrorState(el: HTMLElement, value: NormalizedLazyValue, logger: LogHandler): void;
|
|
7
|
+
export declare function loadElementSource(el: HTMLElement, value: NormalizedLazyValue, logger: LogHandler): void;
|
|
8
|
+
export {};
|
package/dist/hooks.d.ts
ADDED
package/dist/index.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=require(`vue`);var t=function(e){return e.LOADING=`loading`,e.LOADED=`loaded`,e.ERROR=`error`,e}({});function n(e){return e.tagName.toLowerCase()===`img`}function r(e,t){if(n(e)){e.getAttribute(`src`)!==t&&e.setAttribute(`src`,t);return}e.style.backgroundImage=t?`url('${t}')`:``}function i(e,t,n){n?.setAttribute(`lazy`,e),t[e]?.(n)}function a(e,n){i(t.LOADING,n.lifecycle,e),r(e,n.loading)}function o(e,n){i(t.LOADED,n,e)}function s(e,n,a){i(t.ERROR,n.lifecycle,e),n.error&&r(e,n.error),a(`Image failed to load. Source: ${n.src}`)}function c(e,t,i){if(!n(e)){r(e,t.src);return}e.onload=()=>{o(e,t.lifecycle)},e.onerror=()=>{e.onload=null,s(e,t,i)},r(e,t.src)}function l(e){switch(e){case`warn`:return console.warn;case`info`:return console.info;case`debug`:return console.debug;case`log`:return console.log;default:return console.error}}function u(e,t,n,...r){e&&l(t)(n,...r)}var d=class{constructor(e,t,n=()=>void 0){this.observerOptions=e,this.onIntersect=t,this.resolveDelay=n,this.observedElements=new Map,this.handleIntersections=e=>{for(let t of e){let e=t.target,n=this.observedElements.get(e);if(n){if(t.isIntersecting){let t=this.resolveDelay(n.value);if(t&&t>0){if(n.timeoutId)continue;n.timeoutId=setTimeout(()=>{n.timeoutId=void 0,this.triggerLoad(e)},t);continue}this.triggerLoad(e);continue}n.timeoutId&&=(clearTimeout(n.timeoutId),void 0)}}}}setOptions(e){if(this.observerOptions=e,!this.observer||this.observedElements.size===0)return;let t=Array.from(this.observedElements.entries());this.disconnect();for(let[e,n]of t)this.observe(e,n.value)}observe(e,t){this.unobserve(e),this.observedElements.set(e,{value:t}),this.ensureObserver(),this.observer?.observe(e)}unobserve(e){let t=this.observedElements.get(e);t?.timeoutId&&clearTimeout(t.timeoutId),this.observedElements.delete(e),this.observer?.unobserve(e)}disconnect(){for(let[e,t]of this.observedElements.entries())t.timeoutId&&clearTimeout(t.timeoutId),this.observer?.unobserve(e);this.observedElements.clear(),this.observer?.disconnect(),this.observer=void 0}ensureObserver(){this.observer||typeof IntersectionObserver>`u`||(this.observer=new IntersectionObserver(this.handleIntersections,this.observerOptions))}triggerLoad(e){let t=this.observedElements.get(e);t&&(this.unobserve(e),this.onIntersect(e,t.value))}},f=typeof window<`u`&&window!==null;function p(){return h()}function m(e){return typeof e==`function`||Object.prototype.toString.call(e)===`[object Object]`}function h(){return f&&`IntersectionObserver`in window&&`IntersectionObserverEntry`in window&&`intersectionRatio`in window.IntersectionObserverEntry.prototype?(`isIntersecting`in window.IntersectionObserverEntry.prototype||Object.defineProperty(window.IntersectionObserverEntry.prototype,`isIntersecting`,{get(){return this.intersectionRatio>0}}),!0):!1}var g=`data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7`,_={rootMargin:`0px`,threshold:0},v={delay:void 0,error:``,lifecycle:{},loading:g,log:!0,logLevel:`error`,observerOptions:_};function y(e,t={}){return{...e,...t,lifecycle:t.lifecycle??e.lifecycle,observerOptions:{...e.observerOptions,...t.observerOptions}}}function b(e){return y(v,e)}function x(e,t){if(m(e)){let n=e;return{delay:n.delay??t.delay,error:n.error??t.error,lifecycle:n.lifecycle??t.lifecycle,loading:n.loading??t.loading,src:n.src}}return{delay:t.delay,error:t.error,lifecycle:t.lifecycle,loading:t.loading,src:e}}var S=class{constructor(e){this.elementValues=new WeakMap,this.options=b(e),this.observer=new d(this.options.observerOptions,(e,t)=>{this.loadImages(e,t.src,t.error,t.lifecycle)},e=>e.delay)}config(e={}){this.options=y(this.options,e),this.observer.setOptions(this.options.observerOptions)}mount(e,t){if(!e)return;let n=this._valueFormatter(this._getBindingValue(t));if(this.elementValues.set(e,n),a(e,n),!p()){this.loadImages(e,n.src,n.error,n.lifecycle),this._logger(`IntersectionObserver is not supported; loading immediately.`);return}this.observer.observe(e,n)}update(e,t){if(!e)return;let n=this._valueFormatter(this._getBindingValue(t)),r=this.elementValues.get(e);if(!(r&&this._isSameValue(r,n))){if(this.elementValues.set(e,n),a(e,n),!p()){this.loadImages(e,n.src,n.error,n.lifecycle);return}this.observer.observe(e,n)}}unmount(e){e&&(this.elementValues.delete(e),this.observer.unobserve(e))}loadImages(e,t,n,r){c(e,{delay:this.options.delay,error:n??this.options.error,lifecycle:r??this.options.lifecycle,loading:this.options.loading,src:t},(e,...t)=>{this._logger(e,...t)})}_valueFormatter(e){return x(e,this.options)}_log(e){this.options.log&&e()}_getBindingValue(e){return typeof e==`string`?e:e.value}_isSameValue(e,t){return e.src===t.src&&e.loading===t.loading&&e.error===t.error&&e.delay===t.delay&&e.lifecycle===t.lifecycle}_logger(e,...t){u(this.options.log,this.options.logLevel,e,...t)}};function C(e,t){return{...e?.options.observerOptions??_,...t}}var w=(0,e.defineComponent)({name:`LazyComponent`,props:{delay:Number,mode:{default:`once`,type:String},observerOptions:Object,tag:{default:`div`,type:String}},emits:[`load`,`unload`,`visible-change`],setup(t,{attrs:n,emit:r,slots:i}){let a=(0,e.ref)(null),o=(0,e.ref)(!1),s=(0,e.ref)(!1),c=(0,e.inject)(`Lazyload`,null),l,u,d=(0,e.computed)(()=>t.delay??c?.options.delay),f=(0,e.computed)(()=>t.mode??`once`),m=(0,e.computed)(()=>C(c,t.observerOptions));function h(){u&&=(clearTimeout(u),void 0)}function g(){h(),l?.disconnect(),l=void 0}function _(e){s.value!==e&&(s.value=e,r(`visible-change`,e))}function v(){h(),!o.value&&(o.value=!0,r(`load`))}function y(){h(),o.value&&(o.value=!1,r(`unload`))}function b(){if(h(),o.value)return;let e=d.value;if(!e||e<=0){v();return}u=setTimeout(()=>{u=void 0,v()},e)}function x(){_(!0),!(f.value===`once`&&o.value)&&b()}function S(){_(!1),h(),f.value===`visible`&&y()}function w(){if(a.value){if(!p()){_(!0),v();return}l=new IntersectionObserver(e=>{for(let t of e)t.target===a.value&&(t.isIntersecting?x():S())},m.value),l.observe(a.value)}}function T(){a.value&&(g(),w())}return(0,e.onMounted)(()=>{T()}),(0,e.watch)([d,f,m],()=>{f.value===`visible`&&!s.value&&y(),T(),s.value&&!o.value&&b()},{deep:!0}),(0,e.onUnmounted)(()=>{g()}),()=>(0,e.h)(t.tag??`div`,{...n,ref:a,"data-lazy-component":o.value?`loaded`:`loading`},o.value?i.default?.():i.placeholder?.())}});function T(t,n){let r=(0,e.ref)(null),i=(0,e.inject)(`Lazyload`,null),a=!!n&&Object.keys(n).length>0,o=i&&!a?i:new S(i&&n?y(i.options,n):n);return(0,e.onMounted)(()=>{r.value&&o.mount(r.value,t.value)}),(0,e.onUnmounted)(()=>{r.value&&o.unmount(r.value)}),(0,e.watch)(t,e=>{r.value&&o.update(r.value,e)}),r}var E={install(e,t){let n=new S(t);e.config.globalProperties.$Lazyload=n,e.provide(`Lazyload`,n),e.component(`LazyComponent`,w),e.directive(`lazy`,{mounted:n.mount.bind(n),updated:n.update.bind(n),unmounted:n.unmount.bind(n)})}};exports.LazyComponent=w,exports.default=E,exports.useLazyload=T;
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { App } from 'vue';
|
|
2
|
+
import { LazyComponent } from './lazy-component';
|
|
3
|
+
import { LazyOptions } from './types';
|
|
4
|
+
export * from './hooks';
|
|
5
|
+
export { LazyComponent };
|
|
6
|
+
export type { LazyComponentProps } from './types';
|
|
7
|
+
declare const _default: {
|
|
8
|
+
/**
|
|
9
|
+
* install plugin
|
|
10
|
+
*
|
|
11
|
+
* @param {App} Vue
|
|
12
|
+
* @param {LazyOptions} options
|
|
13
|
+
*/
|
|
14
|
+
install(Vue: App, options?: LazyOptions): void;
|
|
15
|
+
};
|
|
16
|
+
export default _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var VueLazyLoad=(function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=function(e){return e.LOADING=`loading`,e.LOADED=`loaded`,e.ERROR=`error`,e}({});function r(e){return e.tagName.toLowerCase()===`img`}function i(e,t){if(r(e)){e.getAttribute(`src`)!==t&&e.setAttribute(`src`,t);return}e.style.backgroundImage=t?`url('${t}')`:``}function a(e,t,n){n?.setAttribute(`lazy`,e),t[e]?.(n)}function o(e,t){a(n.LOADING,t.lifecycle,e),i(e,t.loading)}function s(e,t){a(n.LOADED,t,e)}function c(e,t,r){a(n.ERROR,t.lifecycle,e),t.error&&i(e,t.error),r(`Image failed to load. Source: ${t.src}`)}function l(e,t,n){if(!r(e)){i(e,t.src);return}e.onload=()=>{s(e,t.lifecycle)},e.onerror=()=>{e.onload=null,c(e,t,n)},i(e,t.src)}function u(e){switch(e){case`warn`:return console.warn;case`info`:return console.info;case`debug`:return console.debug;case`log`:return console.log;default:return console.error}}function d(e,t,n,...r){e&&u(t)(n,...r)}var f=class{constructor(e,t,n=()=>void 0){this.observerOptions=e,this.onIntersect=t,this.resolveDelay=n,this.observedElements=new Map,this.handleIntersections=e=>{for(let t of e){let e=t.target,n=this.observedElements.get(e);if(n){if(t.isIntersecting){let t=this.resolveDelay(n.value);if(t&&t>0){if(n.timeoutId)continue;n.timeoutId=setTimeout(()=>{n.timeoutId=void 0,this.triggerLoad(e)},t);continue}this.triggerLoad(e);continue}n.timeoutId&&=(clearTimeout(n.timeoutId),void 0)}}}}setOptions(e){if(this.observerOptions=e,!this.observer||this.observedElements.size===0)return;let t=Array.from(this.observedElements.entries());this.disconnect();for(let[e,n]of t)this.observe(e,n.value)}observe(e,t){this.unobserve(e),this.observedElements.set(e,{value:t}),this.ensureObserver(),this.observer?.observe(e)}unobserve(e){let t=this.observedElements.get(e);t?.timeoutId&&clearTimeout(t.timeoutId),this.observedElements.delete(e),this.observer?.unobserve(e)}disconnect(){for(let[e,t]of this.observedElements.entries())t.timeoutId&&clearTimeout(t.timeoutId),this.observer?.unobserve(e);this.observedElements.clear(),this.observer?.disconnect(),this.observer=void 0}ensureObserver(){this.observer||typeof IntersectionObserver>`u`||(this.observer=new IntersectionObserver(this.handleIntersections,this.observerOptions))}triggerLoad(e){let t=this.observedElements.get(e);t&&(this.unobserve(e),this.onIntersect(e,t.value))}},p=typeof window<`u`&&window!==null;function m(){return g()}function h(e){return typeof e==`function`||Object.prototype.toString.call(e)===`[object Object]`}function g(){return p&&`IntersectionObserver`in window&&`IntersectionObserverEntry`in window&&`intersectionRatio`in window.IntersectionObserverEntry.prototype?(`isIntersecting`in window.IntersectionObserverEntry.prototype||Object.defineProperty(window.IntersectionObserverEntry.prototype,`isIntersecting`,{get(){return this.intersectionRatio>0}}),!0):!1}var _=`data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7`,v={rootMargin:`0px`,threshold:0},y={delay:void 0,error:``,lifecycle:{},loading:_,log:!0,logLevel:`error`,observerOptions:v};function b(e,t={}){return{...e,...t,lifecycle:t.lifecycle??e.lifecycle,observerOptions:{...e.observerOptions,...t.observerOptions}}}function x(e){return b(y,e)}function S(e,t){if(h(e)){let n=e;return{delay:n.delay??t.delay,error:n.error??t.error,lifecycle:n.lifecycle??t.lifecycle,loading:n.loading??t.loading,src:n.src}}return{delay:t.delay,error:t.error,lifecycle:t.lifecycle,loading:t.loading,src:e}}var C=class{constructor(e){this.elementValues=new WeakMap,this.options=x(e),this.observer=new f(this.options.observerOptions,(e,t)=>{this.loadImages(e,t.src,t.error,t.lifecycle)},e=>e.delay)}config(e={}){this.options=b(this.options,e),this.observer.setOptions(this.options.observerOptions)}mount(e,t){if(!e)return;let n=this._valueFormatter(this._getBindingValue(t));if(this.elementValues.set(e,n),o(e,n),!m()){this.loadImages(e,n.src,n.error,n.lifecycle),this._logger(`IntersectionObserver is not supported; loading immediately.`);return}this.observer.observe(e,n)}update(e,t){if(!e)return;let n=this._valueFormatter(this._getBindingValue(t)),r=this.elementValues.get(e);if(!(r&&this._isSameValue(r,n))){if(this.elementValues.set(e,n),o(e,n),!m()){this.loadImages(e,n.src,n.error,n.lifecycle);return}this.observer.observe(e,n)}}unmount(e){e&&(this.elementValues.delete(e),this.observer.unobserve(e))}loadImages(e,t,n,r){l(e,{delay:this.options.delay,error:n??this.options.error,lifecycle:r??this.options.lifecycle,loading:this.options.loading,src:t},(e,...t)=>{this._logger(e,...t)})}_valueFormatter(e){return S(e,this.options)}_log(e){this.options.log&&e()}_getBindingValue(e){return typeof e==`string`?e:e.value}_isSameValue(e,t){return e.src===t.src&&e.loading===t.loading&&e.error===t.error&&e.delay===t.delay&&e.lifecycle===t.lifecycle}_logger(e,...t){d(this.options.log,this.options.logLevel,e,...t)}};function w(e,t){return{...e?.options.observerOptions??v,...t}}var T=(0,t.defineComponent)({name:`LazyComponent`,props:{delay:Number,mode:{default:`once`,type:String},observerOptions:Object,tag:{default:`div`,type:String}},emits:[`load`,`unload`,`visible-change`],setup(e,{attrs:n,emit:r,slots:i}){let a=(0,t.ref)(null),o=(0,t.ref)(!1),s=(0,t.ref)(!1),c=(0,t.inject)(`Lazyload`,null),l,u,d=(0,t.computed)(()=>e.delay??c?.options.delay),f=(0,t.computed)(()=>e.mode??`once`),p=(0,t.computed)(()=>w(c,e.observerOptions));function h(){u&&=(clearTimeout(u),void 0)}function g(){h(),l?.disconnect(),l=void 0}function _(e){s.value!==e&&(s.value=e,r(`visible-change`,e))}function v(){h(),!o.value&&(o.value=!0,r(`load`))}function y(){h(),o.value&&(o.value=!1,r(`unload`))}function b(){if(h(),o.value)return;let e=d.value;if(!e||e<=0){v();return}u=setTimeout(()=>{u=void 0,v()},e)}function x(){_(!0),!(f.value===`once`&&o.value)&&b()}function S(){_(!1),h(),f.value===`visible`&&y()}function C(){if(a.value){if(!m()){_(!0),v();return}l=new IntersectionObserver(e=>{for(let t of e)t.target===a.value&&(t.isIntersecting?x():S())},p.value),l.observe(a.value)}}function T(){a.value&&(g(),C())}return(0,t.onMounted)(()=>{T()}),(0,t.watch)([d,f,p],()=>{f.value===`visible`&&!s.value&&y(),T(),s.value&&!o.value&&b()},{deep:!0}),(0,t.onUnmounted)(()=>{g()}),()=>(0,t.h)(e.tag??`div`,{...n,ref:a,"data-lazy-component":o.value?`loaded`:`loading`},o.value?i.default?.():i.placeholder?.())}});function E(e,n){let r=(0,t.ref)(null),i=(0,t.inject)(`Lazyload`,null),a=!!n&&Object.keys(n).length>0,o=i&&!a?i:new C(i&&n?b(i.options,n):n);return(0,t.onMounted)(()=>{r.value&&o.mount(r.value,e.value)}),(0,t.onUnmounted)(()=>{r.value&&o.unmount(r.value)}),(0,t.watch)(e,e=>{r.value&&o.update(r.value,e)}),r}return e.LazyComponent=T,e.default={install(e,t){let n=new C(t);e.config.globalProperties.$Lazyload=n,e.provide(`Lazyload`,n),e.component(`LazyComponent`,T),e.directive(`lazy`,{mounted:n.mount.bind(n),updated:n.update.bind(n),unmounted:n.unmount.bind(n)})}},e.useLazyload=E,e})({},Vue);
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,339 @@
|
|
|
1
|
+
import { computed as e, defineComponent as t, h as n, inject as r, onMounted as i, onUnmounted as a, ref as o, watch as s } from "vue";
|
|
2
|
+
//#region src/types.ts
|
|
3
|
+
var c = /* @__PURE__ */ function(e) {
|
|
4
|
+
return e.LOADING = "loading", e.LOADED = "loaded", e.ERROR = "error", e;
|
|
5
|
+
}({});
|
|
6
|
+
//#endregion
|
|
7
|
+
//#region src/dom.ts
|
|
8
|
+
function l(e) {
|
|
9
|
+
return e.tagName.toLowerCase() === "img";
|
|
10
|
+
}
|
|
11
|
+
function u(e, t) {
|
|
12
|
+
if (l(e)) {
|
|
13
|
+
e.getAttribute("src") !== t && e.setAttribute("src", t);
|
|
14
|
+
return;
|
|
15
|
+
}
|
|
16
|
+
e.style.backgroundImage = t ? `url('${t}')` : "";
|
|
17
|
+
}
|
|
18
|
+
function d(e, t, n) {
|
|
19
|
+
n?.setAttribute("lazy", e), t[e]?.(n);
|
|
20
|
+
}
|
|
21
|
+
function f(e, t) {
|
|
22
|
+
d(c.LOADING, t.lifecycle, e), u(e, t.loading);
|
|
23
|
+
}
|
|
24
|
+
function p(e, t) {
|
|
25
|
+
d(c.LOADED, t, e);
|
|
26
|
+
}
|
|
27
|
+
function m(e, t, n) {
|
|
28
|
+
d(c.ERROR, t.lifecycle, e), t.error && u(e, t.error), n(`Image failed to load. Source: ${t.src}`);
|
|
29
|
+
}
|
|
30
|
+
function h(e, t, n) {
|
|
31
|
+
if (!l(e)) {
|
|
32
|
+
u(e, t.src);
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
e.onload = () => {
|
|
36
|
+
p(e, t.lifecycle);
|
|
37
|
+
}, e.onerror = () => {
|
|
38
|
+
e.onload = null, m(e, t, n);
|
|
39
|
+
}, u(e, t.src);
|
|
40
|
+
}
|
|
41
|
+
//#endregion
|
|
42
|
+
//#region src/logger.ts
|
|
43
|
+
function g(e) {
|
|
44
|
+
switch (e) {
|
|
45
|
+
case "warn": return console.warn;
|
|
46
|
+
case "info": return console.info;
|
|
47
|
+
case "debug": return console.debug;
|
|
48
|
+
case "log": return console.log;
|
|
49
|
+
default: return console.error;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
function _(e, t, n, ...r) {
|
|
53
|
+
e && g(t)(n, ...r);
|
|
54
|
+
}
|
|
55
|
+
//#endregion
|
|
56
|
+
//#region src/observer.ts
|
|
57
|
+
var v = class {
|
|
58
|
+
constructor(e, t, n = () => void 0) {
|
|
59
|
+
this.observerOptions = e, this.onIntersect = t, this.resolveDelay = n, this.observedElements = /* @__PURE__ */ new Map(), this.handleIntersections = (e) => {
|
|
60
|
+
for (let t of e) {
|
|
61
|
+
let e = t.target, n = this.observedElements.get(e);
|
|
62
|
+
if (n) {
|
|
63
|
+
if (t.isIntersecting) {
|
|
64
|
+
let t = this.resolveDelay(n.value);
|
|
65
|
+
if (t && t > 0) {
|
|
66
|
+
if (n.timeoutId) continue;
|
|
67
|
+
n.timeoutId = setTimeout(() => {
|
|
68
|
+
n.timeoutId = void 0, this.triggerLoad(e);
|
|
69
|
+
}, t);
|
|
70
|
+
continue;
|
|
71
|
+
}
|
|
72
|
+
this.triggerLoad(e);
|
|
73
|
+
continue;
|
|
74
|
+
}
|
|
75
|
+
n.timeoutId &&= (clearTimeout(n.timeoutId), void 0);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
setOptions(e) {
|
|
81
|
+
if (this.observerOptions = e, !this.observer || this.observedElements.size === 0) return;
|
|
82
|
+
let t = Array.from(this.observedElements.entries());
|
|
83
|
+
this.disconnect();
|
|
84
|
+
for (let [e, n] of t) this.observe(e, n.value);
|
|
85
|
+
}
|
|
86
|
+
observe(e, t) {
|
|
87
|
+
this.unobserve(e), this.observedElements.set(e, { value: t }), this.ensureObserver(), this.observer?.observe(e);
|
|
88
|
+
}
|
|
89
|
+
unobserve(e) {
|
|
90
|
+
let t = this.observedElements.get(e);
|
|
91
|
+
t?.timeoutId && clearTimeout(t.timeoutId), this.observedElements.delete(e), this.observer?.unobserve(e);
|
|
92
|
+
}
|
|
93
|
+
disconnect() {
|
|
94
|
+
for (let [e, t] of this.observedElements.entries()) t.timeoutId && clearTimeout(t.timeoutId), this.observer?.unobserve(e);
|
|
95
|
+
this.observedElements.clear(), this.observer?.disconnect(), this.observer = void 0;
|
|
96
|
+
}
|
|
97
|
+
ensureObserver() {
|
|
98
|
+
this.observer || typeof IntersectionObserver > "u" || (this.observer = new IntersectionObserver(this.handleIntersections, this.observerOptions));
|
|
99
|
+
}
|
|
100
|
+
triggerLoad(e) {
|
|
101
|
+
let t = this.observedElements.get(e);
|
|
102
|
+
t && (this.unobserve(e), this.onIntersect(e, t.value));
|
|
103
|
+
}
|
|
104
|
+
}, y = typeof window < "u" && window !== null;
|
|
105
|
+
function b() {
|
|
106
|
+
return S();
|
|
107
|
+
}
|
|
108
|
+
function x(e) {
|
|
109
|
+
return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]";
|
|
110
|
+
}
|
|
111
|
+
function S() {
|
|
112
|
+
return y && "IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype ? ("isIntersecting" in window.IntersectionObserverEntry.prototype || Object.defineProperty(window.IntersectionObserverEntry.prototype, "isIntersecting", { get() {
|
|
113
|
+
return this.intersectionRatio > 0;
|
|
114
|
+
} }), !0) : !1;
|
|
115
|
+
}
|
|
116
|
+
//#endregion
|
|
117
|
+
//#region src/constant.ts
|
|
118
|
+
var C = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", w = {
|
|
119
|
+
rootMargin: "0px",
|
|
120
|
+
threshold: 0
|
|
121
|
+
}, T = {
|
|
122
|
+
delay: void 0,
|
|
123
|
+
error: "",
|
|
124
|
+
lifecycle: {},
|
|
125
|
+
loading: C,
|
|
126
|
+
log: !0,
|
|
127
|
+
logLevel: "error",
|
|
128
|
+
observerOptions: w
|
|
129
|
+
};
|
|
130
|
+
function E(e, t = {}) {
|
|
131
|
+
return {
|
|
132
|
+
...e,
|
|
133
|
+
...t,
|
|
134
|
+
lifecycle: t.lifecycle ?? e.lifecycle,
|
|
135
|
+
observerOptions: {
|
|
136
|
+
...e.observerOptions,
|
|
137
|
+
...t.observerOptions
|
|
138
|
+
}
|
|
139
|
+
};
|
|
140
|
+
}
|
|
141
|
+
function D(e) {
|
|
142
|
+
return E(T, e);
|
|
143
|
+
}
|
|
144
|
+
function O(e, t) {
|
|
145
|
+
if (x(e)) {
|
|
146
|
+
let n = e;
|
|
147
|
+
return {
|
|
148
|
+
delay: n.delay ?? t.delay,
|
|
149
|
+
error: n.error ?? t.error,
|
|
150
|
+
lifecycle: n.lifecycle ?? t.lifecycle,
|
|
151
|
+
loading: n.loading ?? t.loading,
|
|
152
|
+
src: n.src
|
|
153
|
+
};
|
|
154
|
+
}
|
|
155
|
+
return {
|
|
156
|
+
delay: t.delay,
|
|
157
|
+
error: t.error,
|
|
158
|
+
lifecycle: t.lifecycle,
|
|
159
|
+
loading: t.loading,
|
|
160
|
+
src: e
|
|
161
|
+
};
|
|
162
|
+
}
|
|
163
|
+
//#endregion
|
|
164
|
+
//#region src/lazy.ts
|
|
165
|
+
var k = class {
|
|
166
|
+
constructor(e) {
|
|
167
|
+
this.elementValues = /* @__PURE__ */ new WeakMap(), this.options = D(e), this.observer = new v(this.options.observerOptions, (e, t) => {
|
|
168
|
+
this.loadImages(e, t.src, t.error, t.lifecycle);
|
|
169
|
+
}, (e) => e.delay);
|
|
170
|
+
}
|
|
171
|
+
config(e = {}) {
|
|
172
|
+
this.options = E(this.options, e), this.observer.setOptions(this.options.observerOptions);
|
|
173
|
+
}
|
|
174
|
+
mount(e, t) {
|
|
175
|
+
if (!e) return;
|
|
176
|
+
let n = this._valueFormatter(this._getBindingValue(t));
|
|
177
|
+
if (this.elementValues.set(e, n), f(e, n), !b()) {
|
|
178
|
+
this.loadImages(e, n.src, n.error, n.lifecycle), this._logger("IntersectionObserver is not supported; loading immediately.");
|
|
179
|
+
return;
|
|
180
|
+
}
|
|
181
|
+
this.observer.observe(e, n);
|
|
182
|
+
}
|
|
183
|
+
update(e, t) {
|
|
184
|
+
if (!e) return;
|
|
185
|
+
let n = this._valueFormatter(this._getBindingValue(t)), r = this.elementValues.get(e);
|
|
186
|
+
if (!(r && this._isSameValue(r, n))) {
|
|
187
|
+
if (this.elementValues.set(e, n), f(e, n), !b()) {
|
|
188
|
+
this.loadImages(e, n.src, n.error, n.lifecycle);
|
|
189
|
+
return;
|
|
190
|
+
}
|
|
191
|
+
this.observer.observe(e, n);
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
unmount(e) {
|
|
195
|
+
e && (this.elementValues.delete(e), this.observer.unobserve(e));
|
|
196
|
+
}
|
|
197
|
+
loadImages(e, t, n, r) {
|
|
198
|
+
h(e, {
|
|
199
|
+
delay: this.options.delay,
|
|
200
|
+
error: n ?? this.options.error,
|
|
201
|
+
lifecycle: r ?? this.options.lifecycle,
|
|
202
|
+
loading: this.options.loading,
|
|
203
|
+
src: t
|
|
204
|
+
}, (e, ...t) => {
|
|
205
|
+
this._logger(e, ...t);
|
|
206
|
+
});
|
|
207
|
+
}
|
|
208
|
+
_valueFormatter(e) {
|
|
209
|
+
return O(e, this.options);
|
|
210
|
+
}
|
|
211
|
+
_log(e) {
|
|
212
|
+
this.options.log && e();
|
|
213
|
+
}
|
|
214
|
+
_getBindingValue(e) {
|
|
215
|
+
return typeof e == "string" ? e : e.value;
|
|
216
|
+
}
|
|
217
|
+
_isSameValue(e, t) {
|
|
218
|
+
return e.src === t.src && e.loading === t.loading && e.error === t.error && e.delay === t.delay && e.lifecycle === t.lifecycle;
|
|
219
|
+
}
|
|
220
|
+
_logger(e, ...t) {
|
|
221
|
+
_(this.options.log, this.options.logLevel, e, ...t);
|
|
222
|
+
}
|
|
223
|
+
};
|
|
224
|
+
//#endregion
|
|
225
|
+
//#region src/lazy-component.ts
|
|
226
|
+
function A(e, t) {
|
|
227
|
+
return {
|
|
228
|
+
...e?.options.observerOptions ?? w,
|
|
229
|
+
...t
|
|
230
|
+
};
|
|
231
|
+
}
|
|
232
|
+
var j = t({
|
|
233
|
+
name: "LazyComponent",
|
|
234
|
+
props: {
|
|
235
|
+
delay: Number,
|
|
236
|
+
mode: {
|
|
237
|
+
default: "once",
|
|
238
|
+
type: String
|
|
239
|
+
},
|
|
240
|
+
observerOptions: Object,
|
|
241
|
+
tag: {
|
|
242
|
+
default: "div",
|
|
243
|
+
type: String
|
|
244
|
+
}
|
|
245
|
+
},
|
|
246
|
+
emits: [
|
|
247
|
+
"load",
|
|
248
|
+
"unload",
|
|
249
|
+
"visible-change"
|
|
250
|
+
],
|
|
251
|
+
setup(t, { attrs: c, emit: l, slots: u }) {
|
|
252
|
+
let d = o(null), f = o(!1), p = o(!1), m = r("Lazyload", null), h, g, _ = e(() => t.delay ?? m?.options.delay), v = e(() => t.mode ?? "once"), y = e(() => A(m, t.observerOptions));
|
|
253
|
+
function x() {
|
|
254
|
+
g &&= (clearTimeout(g), void 0);
|
|
255
|
+
}
|
|
256
|
+
function S() {
|
|
257
|
+
x(), h?.disconnect(), h = void 0;
|
|
258
|
+
}
|
|
259
|
+
function C(e) {
|
|
260
|
+
p.value !== e && (p.value = e, l("visible-change", e));
|
|
261
|
+
}
|
|
262
|
+
function w() {
|
|
263
|
+
x(), !f.value && (f.value = !0, l("load"));
|
|
264
|
+
}
|
|
265
|
+
function T() {
|
|
266
|
+
x(), f.value && (f.value = !1, l("unload"));
|
|
267
|
+
}
|
|
268
|
+
function E() {
|
|
269
|
+
if (x(), f.value) return;
|
|
270
|
+
let e = _.value;
|
|
271
|
+
if (!e || e <= 0) {
|
|
272
|
+
w();
|
|
273
|
+
return;
|
|
274
|
+
}
|
|
275
|
+
g = setTimeout(() => {
|
|
276
|
+
g = void 0, w();
|
|
277
|
+
}, e);
|
|
278
|
+
}
|
|
279
|
+
function D() {
|
|
280
|
+
C(!0), !(v.value === "once" && f.value) && E();
|
|
281
|
+
}
|
|
282
|
+
function O() {
|
|
283
|
+
C(!1), x(), v.value === "visible" && T();
|
|
284
|
+
}
|
|
285
|
+
function k() {
|
|
286
|
+
if (d.value) {
|
|
287
|
+
if (!b()) {
|
|
288
|
+
C(!0), w();
|
|
289
|
+
return;
|
|
290
|
+
}
|
|
291
|
+
h = new IntersectionObserver((e) => {
|
|
292
|
+
for (let t of e) t.target === d.value && (t.isIntersecting ? D() : O());
|
|
293
|
+
}, y.value), h.observe(d.value);
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
function j() {
|
|
297
|
+
d.value && (S(), k());
|
|
298
|
+
}
|
|
299
|
+
return i(() => {
|
|
300
|
+
j();
|
|
301
|
+
}), s([
|
|
302
|
+
_,
|
|
303
|
+
v,
|
|
304
|
+
y
|
|
305
|
+
], () => {
|
|
306
|
+
v.value === "visible" && !p.value && T(), j(), p.value && !f.value && E();
|
|
307
|
+
}, { deep: !0 }), a(() => {
|
|
308
|
+
S();
|
|
309
|
+
}), () => n(t.tag ?? "div", {
|
|
310
|
+
...c,
|
|
311
|
+
ref: d,
|
|
312
|
+
"data-lazy-component": f.value ? "loaded" : "loading"
|
|
313
|
+
}, f.value ? u.default?.() : u.placeholder?.());
|
|
314
|
+
}
|
|
315
|
+
});
|
|
316
|
+
//#endregion
|
|
317
|
+
//#region src/hooks.ts
|
|
318
|
+
function M(e, t) {
|
|
319
|
+
let n = o(null), c = r("Lazyload", null), l = !!t && Object.keys(t).length > 0, u = c && !l ? c : new k(c && t ? E(c.options, t) : t);
|
|
320
|
+
return i(() => {
|
|
321
|
+
n.value && u.mount(n.value, e.value);
|
|
322
|
+
}), a(() => {
|
|
323
|
+
n.value && u.unmount(n.value);
|
|
324
|
+
}), s(e, (e) => {
|
|
325
|
+
n.value && u.update(n.value, e);
|
|
326
|
+
}), n;
|
|
327
|
+
}
|
|
328
|
+
//#endregion
|
|
329
|
+
//#region src/index.ts
|
|
330
|
+
var N = { install(e, t) {
|
|
331
|
+
let n = new k(t);
|
|
332
|
+
e.config.globalProperties.$Lazyload = n, e.provide("Lazyload", n), e.component("LazyComponent", j), e.directive("lazy", {
|
|
333
|
+
mounted: n.mount.bind(n),
|
|
334
|
+
updated: n.update.bind(n),
|
|
335
|
+
unmounted: n.unmount.bind(n)
|
|
336
|
+
});
|
|
337
|
+
} };
|
|
338
|
+
//#endregion
|
|
339
|
+
export { j as LazyComponent, N as default, M as useLazyload };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { LazyComponentMode } from './types';
|
|
2
|
+
export declare const LazyComponent: import('vue').DefineComponent<{
|
|
3
|
+
delay?: number | undefined;
|
|
4
|
+
mode?: LazyComponentMode | undefined;
|
|
5
|
+
observerOptions?: IntersectionObserverInit | undefined;
|
|
6
|
+
tag?: string | undefined;
|
|
7
|
+
}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
8
|
+
[key: string]: any;
|
|
9
|
+
}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("load" | "unload" | "visible-change")[], "load" | "unload" | "visible-change", import('vue').PublicProps, Readonly<{
|
|
10
|
+
delay?: number | undefined;
|
|
11
|
+
mode?: LazyComponentMode | undefined;
|
|
12
|
+
observerOptions?: IntersectionObserverInit | undefined;
|
|
13
|
+
tag?: string | undefined;
|
|
14
|
+
}> & Readonly<{
|
|
15
|
+
onLoad?: ((...args: any[]) => any) | undefined;
|
|
16
|
+
onUnload?: ((...args: any[]) => any) | undefined;
|
|
17
|
+
"onVisible-change"?: ((...args: any[]) => any) | undefined;
|
|
18
|
+
}>, {
|
|
19
|
+
mode: LazyComponentMode;
|
|
20
|
+
tag: string;
|
|
21
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
22
|
+
export default LazyComponent;
|
package/dist/lazy.d.ts
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { DirectiveBinding } from 'vue';
|
|
2
|
+
import { LazyOptions, Lifecycle, NormalizedLazyValue, ResolvedLazyOptions, ValueFormatterObject } from './types';
|
|
3
|
+
export default class Lazy {
|
|
4
|
+
options: ResolvedLazyOptions;
|
|
5
|
+
private readonly observer;
|
|
6
|
+
private readonly elementValues;
|
|
7
|
+
constructor(options?: LazyOptions);
|
|
8
|
+
config(options?: LazyOptions): void;
|
|
9
|
+
mount(el: HTMLElement, binding: string | DirectiveBinding<string | ValueFormatterObject>): void;
|
|
10
|
+
update(el: HTMLElement, binding: string | DirectiveBinding<string | ValueFormatterObject>): void;
|
|
11
|
+
unmount(el: HTMLElement): void;
|
|
12
|
+
loadImages(el: HTMLElement, src: string, error?: string, lifecycle?: Lifecycle): void;
|
|
13
|
+
_valueFormatter(value: ValueFormatterObject | string): NormalizedLazyValue;
|
|
14
|
+
_log(callback: () => void): void;
|
|
15
|
+
private _getBindingValue;
|
|
16
|
+
private _isSameValue;
|
|
17
|
+
private _logger;
|
|
18
|
+
}
|
package/dist/logger.d.ts
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { LogLevel } from './types';
|
|
2
|
+
type ConsoleMethod = (...args: unknown[]) => void;
|
|
3
|
+
export declare function getLogger(level: LogLevel): ConsoleMethod;
|
|
4
|
+
export declare function emitLog(enabled: boolean, level: LogLevel, message?: unknown, ...optionalParams: unknown[]): void;
|
|
5
|
+
export {};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { NormalizedLazyValue } from './types';
|
|
2
|
+
type DelayResolver<TValue> = (value: TValue) => number | undefined;
|
|
3
|
+
type IntersectHandler<TValue> = (el: HTMLElement, value: TValue) => void;
|
|
4
|
+
export declare class LazyObserver<TValue = NormalizedLazyValue> {
|
|
5
|
+
private observerOptions;
|
|
6
|
+
private readonly onIntersect;
|
|
7
|
+
private readonly resolveDelay;
|
|
8
|
+
private observer?;
|
|
9
|
+
private readonly observedElements;
|
|
10
|
+
constructor(observerOptions: IntersectionObserverInit, onIntersect: IntersectHandler<TValue>, resolveDelay?: DelayResolver<TValue>);
|
|
11
|
+
setOptions(observerOptions: IntersectionObserverInit): void;
|
|
12
|
+
observe(el: HTMLElement, value: TValue): void;
|
|
13
|
+
unobserve(el: HTMLElement): void;
|
|
14
|
+
disconnect(): void;
|
|
15
|
+
private readonly handleIntersections;
|
|
16
|
+
private ensureObserver;
|
|
17
|
+
private triggerLoad;
|
|
18
|
+
}
|
|
19
|
+
export {};
|
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
export type LogLevel = 'error' | 'warn' | 'info' | 'debug' | 'log';
|
|
2
|
+
export interface LazyOptions {
|
|
3
|
+
delay?: number;
|
|
4
|
+
error?: string;
|
|
5
|
+
lifecycle?: Lifecycle;
|
|
6
|
+
loading?: string;
|
|
7
|
+
log?: boolean;
|
|
8
|
+
logLevel?: LogLevel;
|
|
9
|
+
observerOptions?: IntersectionObserverInit;
|
|
10
|
+
}
|
|
11
|
+
export interface LazyComponentProps {
|
|
12
|
+
delay?: number;
|
|
13
|
+
mode?: LazyComponentMode;
|
|
14
|
+
observerOptions?: IntersectionObserverInit;
|
|
15
|
+
tag?: string;
|
|
16
|
+
}
|
|
17
|
+
export type LazyComponentMode = 'once' | 'visible';
|
|
18
|
+
export interface ValueFormatterObject {
|
|
19
|
+
delay?: number;
|
|
20
|
+
error?: string;
|
|
21
|
+
lifecycle?: Lifecycle;
|
|
22
|
+
loading?: string;
|
|
23
|
+
src: string;
|
|
24
|
+
}
|
|
25
|
+
export interface NormalizedLazyValue {
|
|
26
|
+
delay?: number;
|
|
27
|
+
error: string;
|
|
28
|
+
lifecycle: Lifecycle;
|
|
29
|
+
loading: string;
|
|
30
|
+
src: string;
|
|
31
|
+
}
|
|
32
|
+
export interface ResolvedLazyOptions extends Omit<LazyOptions, 'error' | 'lifecycle' | 'loading' | 'log' | 'logLevel' | 'observerOptions'> {
|
|
33
|
+
error: string;
|
|
34
|
+
lifecycle: Lifecycle;
|
|
35
|
+
loading: string;
|
|
36
|
+
log: boolean;
|
|
37
|
+
logLevel: LogLevel;
|
|
38
|
+
observerOptions: IntersectionObserverInit;
|
|
39
|
+
}
|
|
40
|
+
export interface ObservedElementState<TValue = NormalizedLazyValue> {
|
|
41
|
+
timeoutId?: ReturnType<typeof setTimeout>;
|
|
42
|
+
value: TValue;
|
|
43
|
+
}
|
|
44
|
+
export declare enum LifecycleEnum {
|
|
45
|
+
LOADING = "loading",
|
|
46
|
+
LOADED = "loaded",
|
|
47
|
+
ERROR = "error"
|
|
48
|
+
}
|
|
49
|
+
export type Lifecycle = {
|
|
50
|
+
[x in LifecycleEnum]?: (el?: HTMLElement) => void;
|
|
51
|
+
};
|
package/dist/util.d.ts
ADDED
package/package.json
CHANGED
|
@@ -1,6 +1,67 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ohos-ports/vue3-lazyload",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
|
|
3
|
+
"version": "0.4.2-beta.0",
|
|
4
|
+
"description": "A Vue 3 image lazyload plugin",
|
|
5
|
+
"author": "木荣 <admin@imuboy.cn>",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"homepage": "https://github.com/murongg/vue3-lazyload#readme",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "https://github.com/ohos-ports/ohos-ports.git",
|
|
11
|
+
"directory": "ports/vue3-lazyload/0.4.2"
|
|
12
|
+
},
|
|
13
|
+
"bugs": {
|
|
14
|
+
"url": "https://github.com/ohos-ports/ohos-ports/issues"
|
|
15
|
+
},
|
|
16
|
+
"sideEffects": false,
|
|
17
|
+
"exports": {
|
|
18
|
+
".": {
|
|
19
|
+
"types": "./dist/index.d.ts",
|
|
20
|
+
"require": "./dist/index.cjs",
|
|
21
|
+
"import": "./dist/index.mjs"
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
"main": "./dist/index.cjs",
|
|
25
|
+
"module": "./dist/index.mjs",
|
|
26
|
+
"unpkg": "./dist/index.iife.js",
|
|
27
|
+
"jsdelivr": "./dist/index.iife.js",
|
|
28
|
+
"types": "./dist/index.d.ts",
|
|
29
|
+
"files": [
|
|
30
|
+
"dist"
|
|
31
|
+
],
|
|
32
|
+
"peerDependencies": {
|
|
33
|
+
"vue": "^3.4.0 || ^3.5.0"
|
|
34
|
+
},
|
|
35
|
+
"devDependencies": {
|
|
36
|
+
"@murongg/eslint-config": "^0.2.1",
|
|
37
|
+
"@types/node": "^25.6.0",
|
|
38
|
+
"@vitejs/plugin-vue": "^6.0.5",
|
|
39
|
+
"@ohos-ports/vue-test-utils": "^2.4.11-beta.1",
|
|
40
|
+
"bumpp": "^11.0.1",
|
|
41
|
+
"eslint": "^8.57.1",
|
|
42
|
+
"happy-dom": "^20.8.9",
|
|
43
|
+
"husky": "^9.1.7",
|
|
44
|
+
"lint-staged": "^16.4.0",
|
|
45
|
+
"prettier": "^3.8.2",
|
|
46
|
+
"rimraf": "^6.1.3",
|
|
47
|
+
"typescript": "^5.9.3",
|
|
48
|
+
"@ohos-ports/vite": "^8.3.0-beta.0",
|
|
49
|
+
"vite-plugin-dts": "^4.5.4",
|
|
50
|
+
"vitest": "^4.1.4",
|
|
51
|
+
"vue": "^3.5.32"
|
|
52
|
+
},
|
|
53
|
+
"lint-staged": {
|
|
54
|
+
"*": "pnpm run lint:fix"
|
|
55
|
+
},
|
|
56
|
+
"scripts": {
|
|
57
|
+
"build": "rimraf dist && vite build --mode lib",
|
|
58
|
+
"demo:build": "vite build",
|
|
59
|
+
"demo:dev": "vite",
|
|
60
|
+
"lint": "eslint .",
|
|
61
|
+
"lint:fix": "eslint . --fix",
|
|
62
|
+
"release": "bumpp --commit --push --tag && pnpm publish",
|
|
63
|
+
"test": "vitest run",
|
|
64
|
+
"test:watch": "vitest",
|
|
65
|
+
"typecheck": "tsc --noEmit"
|
|
66
|
+
}
|
|
67
|
+
}
|