如何实现图片加载完成后才显示CSS边框？

要解决图片加载前边框提前显示的问题，核心思路是初始状态隐藏边框，仅在图片完全加载完成后再添加边框样式。你之前的代码只做了一次性判断，没有监听图片的加载完成事件，所以边框被移除后无法恢复。以下是具体实现方案：

步骤1：调整CSS样式 #

先修改你的CSS，让图片初始状态无边框，新增一个loaded类来定义加载完成后的边框样式：

.user_img {
    border: none; /* 初始状态无边框 */
}
.user_img.loaded {
    border: 2px solid rgb(136, 186, 60); /* 加载完成后显示边框 */
}

步骤2：修改HTML #

保持图片标签不变，但初始不要加loaded类：

<img src="somepic.png" id="user_img" class="user_img">

步骤3：用JavaScript监听图片加载状态 #

原生JavaScript实现 #

const userImg = document.getElementById('user_img');

// 先检查图片是否已在缓存中加载完成
if (userImg.complete) {
    userImg.classList.add('loaded');
} else {
    // 监听图片加载完成事件
    userImg.addEventListener('load', () => {
        userImg.classList.add('loaded');
    });
    // 可选：处理图片加载失败的情况
    userImg.addEventListener('error', () => {
        console.log('图片加载失败');
        // 你可以在这里添加失败后的样式处理
    });
}

jQuery实现（适配你之前的技术栈） #

const $userImg = $('#user_img');

// 检查图片是否已加载完成（包括缓存）
if ($userImg[0].complete) {
    $userImg.addClass('loaded');
} else {
    // 绑定加载完成事件
    $userImg.on('load', function() {
        $(this).addClass('loaded');
    });
    // 可选：处理加载失败
    $userImg.on('error', function() {
        console.log('图片加载失败');
    });
}

为什么之前的方法无效？ #

你之前的代码只在页面初始化时判断了一次图片状态：如果图片未加载完成就移除user_img类，但没有监听load事件，所以当图片后续加载完成后，没有逻辑去重新添加边框样式，导致边框被永久移除。而上面的方案会先检查图片是否已加载（处理缓存中的图片），未加载的情况下等待加载完成事件触发后再添加边框，完美解决了刷新时边框提前显示的问题。

内容的提问来源于stack exchange，提问作者Ilian Gion Häsler