Skip to content

Commit 64c5261

Browse files
committed
push
1 parent 9601240 commit 64c5261

File tree

3 files changed

+20
-8
lines changed

3 files changed

+20
-8
lines changed

demo/App.vue

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,30 @@
11
<script setup lang="ts">
2-
2+
const flush = () => {
3+
document.location.reload(true)
4+
}
35
</script>
46

57
<template>
68
<div class="demo">
7-
<img v-lazy="'https://i.pinimg.com/474x/89/56/a1/8956a199a913cfa5a4a8696e6f08f821.jpg'" alt="" />
9+
<img
10+
v-for="it in 20"
11+
:key="it"
12+
v-lazy="'https://i.pinimg.com/474x/2e/b9/c1/2eb9c1a03b3b995e001915af141283b6.jpg?random=' + Math.random()"
13+
alt="img" />
814
</div>
915
</template>
1016

1117
<style>
1218
.demo {
1319
text-align: center;
14-
width: 100vw;
15-
height: 100vh;
20+
flex-wrap: wrap;
1621
display: flex;
17-
justify-content: center;
22+
justify-content: space-around;
1823
align-items: center;
1924
}
25+
img {
26+
width: 250px;
27+
margin: 2em;
28+
height: 200px;
29+
}
2030
</style>

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-img-lazy-tiny",
33
"packageManager": "pnpm@6.32.3",
4-
"version": "1.0.0",
4+
"version": "1.1.0",
55
"description": "component based on vue3.x",
66
"main": "index.ts",
77
"scripts": {

src/index.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@ import type { App } from 'vue'
33
export function install(app: App) {
44
app.directive('lazy', {
55
mounted(el, binding) {
6-
el.src = 'https://img-blog.csdnimg.cn/4dc2155d272343ff9b9cc71e0044d9f0.gif'
7-
el.onload = () => {
6+
const img = new Image()
7+
img.src = binding.value
8+
el.src = 'https://hnust-ticknet-swzl.oss-cn-hangzhou.aliyuncs.com/secondClass/2022/03/31/02c9ddd3-aac8-44e7-82d1-13bfead2d07a.gif'
9+
img.onload = () => {
810
el.src = binding.value
911
}
1012
},

0 commit comments

Comments
 (0)