fix. loading, preload 추가
This commit is contained in:
@@ -3,7 +3,15 @@ interface Props {
|
|||||||
src: string | { pc?: string; mo?: string }
|
src: string | { pc?: string; mo?: string }
|
||||||
alt?: string
|
alt?: string
|
||||||
imageType?: 'public' | 'cdn'
|
imageType?: 'public' | 'cdn'
|
||||||
|
/**
|
||||||
|
* 브라우저 네이티브 priority 값
|
||||||
|
* - 'high' : fold 내 반드시 보여야 하는 이미지
|
||||||
|
* - 'low' : 중요도 낮은 이미지
|
||||||
|
* - 'auto' : 기본값, 브라우저에 위임
|
||||||
|
*/
|
||||||
priority?: 'high' | 'low' | 'auto'
|
priority?: 'high' | 'low' | 'auto'
|
||||||
|
/** 실제 이미지 로드 전까지 표시할 placeholder 이미지 경로 */
|
||||||
|
placeholder?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
@@ -37,14 +45,22 @@ const imagePaths = computed(() => {
|
|||||||
: '',
|
: '',
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const placeholderSrc = computed(() => props.placeholder ?? '')
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<picture v-if="isResponsiveMode">
|
<picture v-if="isResponsiveMode">
|
||||||
<source media="(min-width: 1024px)" :srcset="imagePaths.pc" />
|
<source
|
||||||
<source media="(max-width: 1023px)" :srcset="imagePaths.mo" />
|
media="(min-width: 1024px)"
|
||||||
|
:srcset="imagePaths.pc || placeholderSrc"
|
||||||
|
/>
|
||||||
|
<source
|
||||||
|
media="(max-width: 1023px)"
|
||||||
|
:srcset="imagePaths.mo || placeholderSrc"
|
||||||
|
/>
|
||||||
<img
|
<img
|
||||||
:src="imagePaths.mo"
|
:src="imagePaths.mo || placeholderSrc"
|
||||||
:alt="alt"
|
:alt="alt"
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
:loading="priority === 'high' ? 'eager' : 'lazy'"
|
:loading="priority === 'high' ? 'eager' : 'lazy'"
|
||||||
@@ -55,7 +71,7 @@ const imagePaths = computed(() => {
|
|||||||
|
|
||||||
<img
|
<img
|
||||||
v-else
|
v-else
|
||||||
:src="imagePaths.mo"
|
:src="imagePaths.mo || placeholderSrc"
|
||||||
:alt="alt"
|
:alt="alt"
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
:loading="priority === 'high' ? 'eager' : 'lazy'"
|
:loading="priority === 'high' ? 'eager' : 'lazy'"
|
||||||
|
|||||||
@@ -7,6 +7,13 @@ interface Props {
|
|||||||
loop?: boolean
|
loop?: boolean
|
||||||
bordered?: boolean
|
bordered?: boolean
|
||||||
class?: string
|
class?: string
|
||||||
|
/**
|
||||||
|
* 비디오 데이터 로딩 시점
|
||||||
|
* - none: 재생 전까지 로드 안 함 (가장 절약)
|
||||||
|
* - metadata: 길이·크기 등 메타만 로드
|
||||||
|
* - auto: 재생에 맞게 미리 로드 (autoplay 시 권장)
|
||||||
|
*/
|
||||||
|
preload?: 'none' | 'metadata' | 'auto'
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
@@ -16,6 +23,10 @@ const props = withDefaults(defineProps<Props>(), {
|
|||||||
bordered: true,
|
bordered: true,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const effectivePreload = computed(
|
||||||
|
() => props.preload ?? (props.play ? 'auto' : 'none')
|
||||||
|
)
|
||||||
|
|
||||||
const videoRef = ref<HTMLVideoElement | null>(null)
|
const videoRef = ref<HTMLVideoElement | null>(null)
|
||||||
const pauseTimer = ref<ReturnType<typeof setTimeout> | null>(null)
|
const pauseTimer = ref<ReturnType<typeof setTimeout> | null>(null)
|
||||||
|
|
||||||
@@ -119,6 +130,7 @@ onBeforeUnmount(() => {
|
|||||||
:poster="props.poster"
|
:poster="props.poster"
|
||||||
:loop="props.loop"
|
:loop="props.loop"
|
||||||
:autoplay="props.play"
|
:autoplay="props.play"
|
||||||
|
:preload="effectivePreload"
|
||||||
muted
|
muted
|
||||||
playsinline
|
playsinline
|
||||||
webkit-playsinline
|
webkit-playsinline
|
||||||
|
|||||||
Reference in New Issue
Block a user