File tree Expand file tree Collapse file tree 1 file changed +32
-0
lines changed Expand file tree Collapse file tree 1 file changed +32
-0
lines changed Original file line number Diff line number Diff line change @@ -6,6 +6,38 @@ A Tiny img lazy load `vue directive`
6
6
<img src="http://img.badgesize.io/https://unpkg.com/vue-img-lazy-tiny?compression=gzip&label=gzip%20size:%20JS">
7
7
</a >
8
8
9
+ ## Usage
10
+
11
+ Install it with ` npm ` or other package manager
12
+
13
+ ``` shell
14
+ $ npm install vue-img-lazy-tiny
15
+ ```
16
+
17
+ Register vue directive
18
+
19
+ ``` ts
20
+ import vilt from ' vue-img-lazy-tiny'
21
+
22
+ createApp (App )
23
+ .use (vilt ) // install vilt
24
+ .mount (' #app' )
25
+ ```
26
+
27
+ Use it in your template, your image will be lazy loaded.
28
+
29
+ ``` html
30
+ <script setup lang =" ts" >
31
+ const url = ' https://avatars.githubusercontent.com/u/59404696?v=4'
32
+ </script >
33
+
34
+ <div >
35
+ <img v-lazy =" url" />
36
+ </div >
37
+ ```
38
+
9
39
## Preview
10
40
41
+ The directive will provide a sheild element to cover the original image, and a loading spinner.
42
+
11
43
< https://peterroe.github.io/vue-img-lazy-tiny/ >
You can’t perform that action at this time.
0 commit comments