CP-VueDir

Appearance

v-preload ​

一个简单的资源预加载指令，当元素进入视口时自动预加载链接资源。支持页面和跨域资源的预加载。

功能特点 ​

  • 🚀 自动预加载：元素进入视口时触发
  • 🔗 多类型支持：支持页面和资源预加载
  • 🛠 可自定义：支持自定义预加载处理逻辑
  • 🌐 跨域支持：支持跨域资源的预加载
  • 📦 轻量简单：使用简单，零配置即可使用

基础用法 ​

只需在 <a> 标签上添加 v-preload 指令即可启用预加载功能：

页面预加载

预加载演示页面

跨域资源预加载

预加载外部图片 预加载外部样式
查看代码
vue
<template>
  <div class="preload-demo">
    <h3>页面预加载</h3>
    <a v-preload href="/demo/preload-demo">预加载演示页面</a>

    <h3>跨域资源预加载</h3>
    <div class="resource-links">
      <a
        v-preload
        href="https://fastly.picsum.photos/id/672/200/300.jpg?hmac=jesIP8UU3kCf3sIVWhv1x1qzFDtzqroRy5vY_47ss1I"
      >
        预加载外部图片
      </a>
      <a v-preload href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> 预加载外部样式 </a>
    </div>
  </div>
</template>

<script setup>
import { vPreload } from '@cp-vuedir/core'
</script>
<style scoped>
.preload-demo {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.resource-links {
  display: flex;
  gap: 20px;
  margin-top: 10px;
}

a {
  display: inline-block;
  padding: 8px 16px;
  background: #f0f0f0;
  border-radius: 4px;
  text-decoration: none;
  color: #666;
}

a:hover {
  background: #e0e0e0;
}

h3 {
  margin: 16px 0 8px;
  font-size: 16px;
  color: #333;
}
</style>

高级用法 ​

配置选项 ​

v-preload 指令支持以下配置选项：

选项类型默认值说明
type'page' | 'resource''page'预加载类型
handler(url: string) => void-自定义预加载处理函数

预加载类型 ​

通过 type 属性可以指定不同的预加载类型：

  • page：预加载页面内容
  • resource：预加载资源文件（图片、样式等）

自定义处理 ​

你可以通过 handler 属性来实现自定义的预加载逻辑：

自定义预加载处理

自定义预加载处理

预加载日志:

查看代码
vue
<template>
  <div class="advanced-demo">
    <h3>自定义预加载处理</h3>
    <div class="demo-section">
      <a
        v-preload="{
          handler: (url) => {
            console.log('自定义预加载:', url)
            // 这里可以实现自定义的预加载逻辑
          }
        }"
        href="https://example.com/custom-resource"
      >
        自定义预加载处理
      </a>
    </div>

    <div class="demo-logs">
      <p>预加载日志:</p>
      <ul>
        <li v-for="(log, index) in logs" :key="index">{{ log }}</li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { vPreload } from '@cp-vuedir/core'

const logs = ref<string[]>([])

const preloadHandler = (e: Event) => {
  const customEvent = e as CustomEvent<{ url: string }>
  logs.value.push(`预加载: ${customEvent.detail.url}`)
}

onMounted(() => {
  window.addEventListener('preload', preloadHandler as EventListener)
})

onBeforeUnmount(() => {
  window.removeEventListener('preload', preloadHandler as EventListener)
})
</script>

<style scoped>
.advanced-demo {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.demo-section {
  margin: 16px 0;
  display: flex;
  gap: 16px;
}

a {
  display: inline-block;
  padding: 8px 16px;
  background: #f0f0f0;
  border-radius: 4px;
  text-decoration: none;
  color: #666;
}

a:hover {
  background: #e0e0e0;
}

.demo-logs {
  margin-top: 20px;
  padding: 12px;
  background: #f8f8f8;
  border-radius: 4px;
}

.demo-logs p {
  margin: 0 0 8px;
  font-weight: bold;
}

.demo-logs ul {
  margin: 0;
  padding-left: 20px;
  color: #666;
}

h3 {
  margin: 16px 0 8px;
  font-size: 16px;
  color: #333;
}
</style>

注意事项 ​

使用限制

  • 指令仅支持 <a> 标签
  • 使用 link rel="preload" 进行资源预加载
  • 自动识别常见资源类型（图片、样式、脚本等）
  • 支持跨域资源预加载，但需要目标服务器支持 CORS
  • 资源加载失败时会在控制台显示警告信息

性能建议

  • 合理使用预加载，避免过多资源同时预加载
  • 建议只对重要的、即将被用户访问的资源进行预加载
  • 考虑用户的网络环境，移动端建议谨慎使用