@mixd-id/web-scaffold 0.1.230406134 → 0.1.230406136

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406134",
+  "version": "0.1.230406136",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/Image.vue

@@ -65,6 +65,10 @@ export default{
 
   computed:{
 
+		actualSrc(){
+			return this.mediaSrc[this.$screenPrefix]
+		},
+
 		compClass(){
 			return [
 				this.$style.comp,
@@ -89,21 +93,31 @@ export default{
   data(){
     return {
 			status: 0, // 0:empty, 1:loading, 2:image, 3:error
-			actualSrc: 'data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=',
-			moved: false
+			moved: false,
+			mediaSrc: {},
+			visibled: false
     }
   },
 
   mounted(){
 		this.$observe.once(this.$el, () => {
+			this.visibled = true
 			this.loadSrc()
 		})
 
-		this.$resize(() => this.loadSrc())
+		this.$resize(this.onResize)
   },
 
+	unmounted() {
+		this.$unresize(this.onResize)
+	},
+
 	methods:{
 
+		onResize(){
+			this.loadSrc()
+		},
+
 		onChange(e){
 			if(e.target.files.length > 0){
 				var reader = new FileReader();
@@ -122,10 +136,20 @@ export default{
 
 		async loadSrc(){
 
+			// src: String | Array | File
+
+			if(!this.visibled){
+				return
+			}
+
+			if(this.$screenPrefix in this.mediaSrc){
+				return
+			}
+
 			if(typeof this.src === 'string') {
 
 				if (this.src.startsWith('data:image')) {
-					this.actualSrc = this.src
+					this.mediaSrc[this.$screenPrefix] = this.src
 					this.status = 2
 				}
 				else{
@@ -156,12 +180,12 @@ export default{
 						img.addEventListener('load', () => {
 							if(img.getAttribute('data-src') !== this.src) return
 							this.status = 2
-							this.actualSrc = img.src
+							this.mediaSrc[this.$screenPrefix] = img.src
 						})
 						img.addEventListener('error', (err) => {
 							if(img.getAttribute('data-src') !== this.src) return
 							this.status = 3
-							this.actualSrc = this.defaultSrc
+							this.mediaSrc[this.$screenPrefix] = this.defaultSrc
 						})
 						img.src = imgSrc
 						img.setAttribute('data-src', this.src)
@@ -188,11 +212,11 @@ export default{
 					var img = new Image()
 					img.addEventListener('load', () => {
 						this.status = 2
-						this.actualSrc = img.src
+						this.mediaSrc[this.$screenPrefix] = img.src
 					})
 					img.addEventListener('error', (err) => {
 						this.status = 3
-						this.actualSrc = this.defaultSrc
+						this.mediaSrc[this.$screenPrefix] = this.defaultSrc
 					})
 					img.src = imgSrc
 					this.status = 1
@@ -203,18 +227,17 @@ export default{
 
 				reader.addEventListener('load', () => {
 					this.status = 2
-					this.actualSrc = reader.result
+					this.mediaSrc[this.$screenPrefix] = reader.result
 				}, false)
 
 				reader.addEventListener('error', () => {
 					this.status = 3
-					this.actualSrc = this.defaultSrc
+					this.mediaSrc[this.$screenPrefix] = this.defaultSrc
 				})
 
 				reader.readAsDataURL(this.src)
 				this.status = 1
 			}
-
 		},
 
 		onClick(){

package/src/index.js

@@ -1,4 +1,4 @@
-import {defineAsyncComponent, ref} from "vue"
+import {defineAsyncComponent, reactive, ref} from "vue"
 import {accessNestedObject, observeInit} from './utils/helpers.mjs'
 import throttle from "lodash/throttle"
 
@@ -273,11 +273,12 @@ export default{
         app.config.globalProperties.$observe = observeInit()
       }
 
-      app.config.globalProperties.$screenPrefix = ref(util.calculateMediaPrefix(window.innerWidth))
+      app.config.globalProperties.$screenPrefix = reactive(util.calculateMediaPrefix(window.innerWidth))
       const onWindowResize = throttle(() => {
-        app.config.globalProperties.$screenPrefix.value = util.calculateMediaPrefix(window.innerWidth)
+        app.config.globalProperties.$screenPrefix = util.calculateMediaPrefix(window.innerWidth)
         resizeEvents.forEach((fn) => fn())
-      }, 300, { leading:true })
+        console.log('1')
+      }, 500, { leading:true })
 
       window.addEventListener('resize', onWindowResize)
     }