fix. loading, preload 추가

This commit is contained in:
clkim
2026-03-06 15:06:01 +09:00
parent be59ca2823
commit eca40d10c2
2 changed files with 32 additions and 4 deletions

View File

@@ -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'"

View File

@@ -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