###
Vue 中图片
加载时出现
闪烁的解决方案
在
Vue 应用中，当图片尚未完成
加载时可能会导致页面布局
不稳定或视觉上的
闪烁现象。这种问题可以通过多种方式来解决。
#### 方法一：通过 `v-cloak` 隐藏未编译的
内容
为了防止模板
内容过早
显示，在 CSS 中设置 `[v-cloak] { display: none; }` 可以隐藏未被
Vue 编译的部分[^3]。这样可以有效避免因数据绑定延迟而导致的短暂文字或占位符展示。
```html
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app" v-cloak>
<div v-for="item in items" :key="item
.id">
<img :src="item
.src" alt="image"/>
</div>
</div>
```
这种方法适用于整个组件初始化阶段，但对于动态
加载的图片可能
不够全面。
---
#### 方法二：监听图片
加载事件并调整位置
对于
不定高图片引起的布局跳动问题，可以在图片
加载完成后手动触发重新计算位置的操作。这通常借助于
JavaScript 的原生 `onload` 或者现代浏览器支持的 `ResizeObserver` API 来实现[^1]。
以下是基于
Vue 实现的一个例子：
```
javascript
<template>
<div class="container">
<div v-for="item in visibleData" :key="item
.id" :id="item
.id" ref="items" class="list-item">
{{ item
.value }}
<img :src="item
.img" @load="updatePositions" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
visibleData: [
{ id: '1', value: 'Item 1', img: 'path/to/image1
.jpg' },
{ id: '2', value: 'Item 2', img: 'path/to/image2
.jpg' }
]
};
},
methods: {
updatePositions(event) {
const target = event
.target;
this
.$refs
.items
.forEach((el) => {
el
.style
.position = 'relative'; // 调整样式以适应新高度
});
}
}
};
</script>
```
此方法能够确保每张图片
加载完毕后立即更新
DOM 布局，从而减少
闪烁的可能性。
---
#### 方法三：预设固定宽高比例容器
另一种常见做法是在 HTML 结构中预先设定好图片的比例尺寸作为占位空间，即使图片还未
加载出来也
不会影响整体布局结构。例如：
```html
<div style="position:relative;">
<div style="padding-top:56
.25%;"></div> <!-- 维持16:9比例 -->
<img src="example
.jpg" style="position:absolute;top:0;left:0;width:100%;height:auto;" />
</div>
```
这种方式无需额外脚本即可稳定视图效果，尤其适合响应式设计下的多分辨率适配需求。
---
#### 方法四：CSS 层面优化——懒
加载配合模糊渐显动画
采用第三方库（如
vue-lazyload）进行按需
加载的同
时加入过渡效果可以让用户体验更加流畅自然。下面是一个简单的配置案例：
```
javascript
import
Vue from '
vue';
import
VueLazyload from '
vue-lazyload';
Vue.use(
VueLazyload, {
preLoad: 1
.3,
error: require('
./assets/error
.png'),
loading: require('
./assets/loading
.gif'),
attempt: 1
});
// 使用示例
<img v-lazy="'https://url-to-image
.com/example
.jpg'" />
```
结合 CSS 动画进一步提升观感质量：
```css
.lazy-fade-enter-active {
transition: opacity
.7s ease-in-out;
}
.lazy-fade-enter-from {
opacity: 0;
}
.lazy-fade-enter-to {
opacity: 1;
}
```
以上策略
不仅解决了初始渲染期间可能出现的画面抖动情况，还增强了交互友好度。
---
### 总结
针对
Vue 开发过程中遇到的各种类型的
加载闪烁难题，上述四种途径各有侧重且互为补充。开发者可以根据实际项目特点灵活选用最合适的手段加以应对。
扫一扫
942
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
