Vue 登录页高低分辨率背景图优化实现
在实际前端项目中，登录页往往是用户进入应用的第一印象窗口。如果直接加载高分辨率图片作为背景，可能会导致首屏加载缓慢，影响用户体验。本文将以 Vue 实现为例，介绍如何优雅地处理登录页的低分辨率占位图 + 高分辨率图片懒加载方案，同时实现页面动画过渡效果。
一、项目需求分析
快速首屏显示：使用低分辨率图片占位，保证页面快速渲染。
高分辨率渐入显示：高分辨率图片加载完成后，平滑切换背景，提升视觉体验
可扩展性：登录页包含账号密码输入框、忘记密码按钮和登录操作，背景切换逻辑应独立，不影响业务逻辑。
二、实现思路
初始渲染低分辨率图片：在
login-container默认背景中设置低分辨率图。高分辨率图片懒加载：在
mounted()生命周期中创建Image对象，监听onload事件。切换 CSS class：高分辨率图片加载完成后，修改组件状态，触发
class切换，实现背景渐变切换
核心流程
graph TD
A[页面加载] --> B[显示低分辨率背景]
B --> C[创建高分辨率 Image 对象]
C --> D[监听图片加载完成事件]
D --> E[切换 highLoaded 状态]
E --> F[触发 CSS 背景切换]
三、全部代码
<div :class="['login-container', { 'high-loaded': highLoaded }]">highLoaded: false, // 高分辨率背景是否加载完成 loadHighResBackground() {const img = new Image();img.src = require('../assets/infinity-6467887.png'); // 高分辨率图片路径img.onload = () => {this.highLoaded = true; // 切换 class，触发背景替换};},.login-container {background: url('../assets/infinity-low.png') no-repeat center center;background-size: cover;transition: background-image 0.5s ease-in-out; }.login-container.high-loaded {background: url('../assets/infinity-6467887.png') no-repeat center center;background-size: cover; }
1.<div :class="['login-container', { 'high-loaded': highLoaded }]">解析这段代码是 Vue 的动态绑定 class 写法，意思是：
<div class="login-container" :class="{ 'high-loaded': highLoaded }">
login-container：这是固定的基础 class，始终存在。
{ 'high-loaded': highLoaded }：这是动态 class，当highLoaded为true时，会给<div>添加high-loaded这个 class。
2.
const img = new Image();解析这段代码是手动创建一个图片对象并加载图片，主要用来异步预加载高分辨率背景图
const img = new Image(); img.src = require('../assets/infinity-6467887.png'); // 高分图路径 img.onload = () => {this.highLoaded = true; // 高分图加载完成，触发 class 切换 };
new Image()：创建一个 JavaScript 的 Image 对象，相当于在内存里生成一个图片元素，但不会直接渲染到页面上。
img.src = ...：给 Image 对象赋值路径，浏览器会开始加载这张图片。
require('../assets/infinity-6467887.png')：Webpack 或 Vite 打包方式，确保图片路径被正确解析。
img.onload：监听图片加载完成事件，当图片完全加载后触发回调。
this.highLoaded = true：修改 Vue 组件状态 → 触发动态 class 切换 → 背景图替换为高分辨率图。