vue实现预加载图片
预加载图片的基本原理
预加载图片的核心是通过JavaScript提前创建Image对象并设置src属性，让浏览器在后台加载图片资源。当实际需要显示图片时，由于缓存已存在，图片会立即呈现。
使用Vue实现预加载的几种方法
方法一：组件内预加载
在Vue组件的mounted或created生命周期钩子中预加载图片：
export default {
methods: {
preloadImages(urls) {
urls.forEach(url => {
const img = new Image()
img.src = url
})
}
},
mounted() {
this.preloadImages([
require('@/assets/image1.jpg'),
require('@/assets/image2.png')
])
}
}方法二：全局混入预加载
创建全局mixin供所有组件使用：
// main.js
Vue.mixin({
methods: {
$preloadImage(url) {
return new Promise((resolve, reject) => {
const img = new Image()
img.onload = resolve
img.onerror = reject
img.src = url
})
}
}
})
// 组件中使用
this.$preloadImage('/path/to/image.jpg').then(() => {
console.log('图片加载完成')
})方法三：指令式预加载
自定义指令实现图片预加载：
Vue.directive('preload', {
inserted(el, binding) {
const img = new Image()
img.src = binding.value
img.onload = () => {
el.setAttribute('src', binding.value)
}
}
})
// 模板中使用
<img v-preload="imageUrl" alt="">优化策略
批量预加载
对于大量图片，建议分批次加载避免阻塞：
async function batchPreload(urls, batchSize = 5) {
for (let i = 0; i < urls.length; i += batchSize) {
const batch = urls.slice(i, i + batchSize)
await Promise.all(batch.map(url => this.$preloadImage(url)))
}
}优先级控制
通过Intersection Observer API实现懒加载与预加载结合：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target
img.src = img.dataset.src
observer.unobserve(img)
}
})
})
document.querySelectorAll('[data-src]').forEach(img => {
observer.observe(img)
})注意事项
- 生产环境建议使用webpack的require或import语法处理资源路径
- 移动端需注意流量消耗问题，可添加判断条件控制预加载
- 预加载过多图片可能导致内存压力，需要合理控制数量
- 考虑使用loading占位符提升用户体验
