push

Author: peterroe

demo/App.vue

@@ -1,20 +1,30 @@
 <script setup lang="ts">
-
+const flush = () => {
+  document.location.reload(true)
+}
 </script>
 
 <template>
   <div class="demo">
-    <img v-lazy="'https://i.pinimg.com/474x/89/56/a1/8956a199a913cfa5a4a8696e6f08f821.jpg'" alt="" />
+    <img
+      v-for="it in 20"
+      :key="it"
+      v-lazy="'https://i.pinimg.com/474x/2e/b9/c1/2eb9c1a03b3b995e001915af141283b6.jpg?random=' + Math.random()"
+      alt="img" />
   </div>
 </template>
 
 <style>
 .demo {
   text-align: center;
-  width: 100vw;
-  height: 100vh;
+  flex-wrap: wrap;
   display: flex;
-  justify-content: center;
+  justify-content: space-around;
   align-items: center;
 }
+img {
+  width: 250px;
+  margin: 2em;
+  height: 200px;
+}
 </style>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-img-lazy-tiny",
   "packageManager": "pnpm@6.32.3",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "component based on vue3.x",
   "main": "index.ts",
   "scripts": {

src/index.ts

@@ -3,8 +3,10 @@ import type { App } from 'vue'
 export function install(app: App) {
   app.directive('lazy', {
     mounted(el, binding) {
-      el.src = 'https://img-blog.csdnimg.cn/4dc2155d272343ff9b9cc71e0044d9f0.gif'
-      el.onload = () => {
+      const img = new Image()
+      img.src = binding.value
+      el.src = 'https://hnust-ticknet-swzl.oss-cn-hangzhou.aliyuncs.com/secondClass/2022/03/31/02c9ddd3-aac8-44e7-82d1-13bfead2d07a.gif'
+      img.onload = () => {
         el.src = binding.value
       }
     },