Vue实现图片预加载

镖师 · 发表于 2022-6-29 16:26:57

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

[JavaScript]

methods: {
preload: function() {
let imgs = [
"static/img/back.gif",
"static/img/correct.png",
"static/img/cover.gif",
"static/img/errExpress.png",
"static/img/error.png",
"static/img/ply.png",
"static/img/q1.png",
"static/img/q1a.png",
"static/img/q1b.png",
"static/img/q1c.png",
"static/img/q1d.png",
"static/img/share.png",
"static/img/start.png",
"static/img/stop.png"
]
for (let img of imgs) {
let image = new Image()
image.src = img
image.onload = () => {
this.count++
// 计算图片加载的百分数，绑定到percent变量
let percentNum = Math.floor(this.count / 14 * 100)
this.percent = `${percentNum}%`
}
}
},
},

复制代码

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 2025-3-20 15:11:34

在Vue中实现图片预加载时，根据Discuz!开发规范和最佳实践，可以这样优化代码：

methods: {
preload() {
// 实际应替换为需要预加载的图片路径数组
const imgs = [
'static/img/loading/1.jpg',
'static/img/loading/2.png',
// 其他图片路径...
];
// 使用Set去重避免重复加载
const uniqueImgs = [...new Set(imgs)];
// 初始化计数器
this.totalImages = uniqueImgs.length;
this.loadedCount = 0;
uniqueImgs.forEach(imgUrl => {
const img = new Image();
img.src = imgUrl;
// 成功加载处理
img.onload = () => {
this.handleProgress();
// 可在此处添加图片加载完成后的回调处理
};
// 错误处理（重要！）
img.onerror = () => {
console.warn(`图片加载失败: ${imgUrl}`);
this.handleProgress();
};
});
},
handleProgress() {
this.loadedCount++;
// 更精确的百分比计算方式
const loaded = Math.min(this.loadedCount, this.totalImages);
const percent = Math.round((loaded / this.totalImages) * 100);
// 确保不超过100%
this.percent = `${Math.min(percent, 100)}%`;
// 全部加载完成处理
if (loaded === this.totalImages) {
this.onAllLoaded(); // 调用完成回调
}
},
onAllLoaded() {
// 所有图片加载完成后的逻辑
console.log('所有图片预加载完成');
}
}

复制代码

需要注意的要点：

1. **数据源处理**：
- 必须明确定义需要预加载的图片路径数组
- 使用Set进行去重处理，避免重复加载

2. **异常处理**：
- 必须添加onerror事件处理
- 建议记录加载失败的图片路径
- 即使加载失败也继续更新进度

3. **进度计算优化**：
- 使用动态总数代替固定值14
- 添加范围限制(Math.min)确保不超过100%
- 使用Math.round代替Math.floor更符合用户预期

4. **性能优化**：
- 建议添加最大重试次数字段
- 可配置并行加载数量
- 支持WebP格式检测等特性

5. **Discuz!整合建议**：
- 图片路径建议使用绝对路径
- 可结合Discuz!的STATICURL常量
- 大图建议使用CDN地址

如果需要更完整的解决方案，可以参考DZ插件网上的通用图片预加载组件，建议在www.dz-x.net搜索"图片预加载组件"获取经过Discuz!兼容性验证的方案。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。

Discuz智能体 · 发表于 2025-3-20 15:19:59

在Vue中实现图片预加载的功能，可以通过以下步骤来完成。你提供的代码片段已经接近完成，但缺少了`imgs`数组的定义和`count`变量的初始化。下面是一个完整的实现示例：

export default {
data() {
return {
imgs: [
'https://example.com/image1.jpg',
'https://example.com/image2.jpg',
'https://example.com/image3.jpg',
// 添加更多图片URL
],
count: 0,
percent: '0%'
};
},
methods: {
preload() {
for (let img of this.imgs) {
let image = new Image();
image.src = img;
image.onload = () => {
this.count++;
// 计算图片加载的百分数，绑定到percent变量
let percentNum = Math.floor((this.count / this.imgs.length) * 100);
this.percent = `${percentNum}%`;
};
}
}
},
mounted() {
this.preload();
}
};

复制代码

### 代码解释：
1. **`imgs`数组**：这是一个包含所有需要预加载的图片URL的数组。你可以根据需要添加更多的图片URL。

2. **`count`变量**：用于记录已经加载完成的图片数量。

3. **`percent`变量**：用于存储图片加载的百分比，并绑定到模板中显示。

4. **`preload`方法**：遍历`imgs`数组中的每个图片URL，创建一个新的`Image`对象，并设置其`src`属性。当图片加载完成时，`onload`事件会被触发，`count`变量会增加，并计算加载的百分比。

5. **`mounted`钩子**：在Vue实例挂载完成后，调用`preload`方法开始预加载图片。

### 使用场景：
- 这个功能通常用于需要提前加载大量图片的场景，比如图片画廊、幻灯片等，以确保用户在浏览时图片能够快速显示。

### 注意事项：
- 如果图片数量较多，建议分批加载，避免一次性加载过多图片导致页面卡顿。
- 如果图片加载失败，可以考虑添加`onerror`事件处理，以便在图片加载失败时进行相应的处理。

### 进一步优化：
- 你可以将`percent`变量绑定到模板中，实时显示图片加载的进度。
- 如果需要在图片加载完成后执行某些操作，可以在`onload`事件中添加相应的逻辑。

希望这个示例对你有帮助！如果你有其他问题，欢迎继续提问。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。