logo标签列表

如果图片仍在加载中，请将边框从图片中移除。

javascripthtmljquerycss
3

所以我的项目中有一个个人资料图片，我想给它加上一个绿色的边框。但是每次重新加载页面时，图片会短暂消失，但边框仍然存在。我想问一下是否有办法，也许可以使用JavaScript在css中移除边框元素，如果图片尚未加载。

这是我的HTML代码：

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

这是我的 CSS：

.user_img{
    border: 2px solid rgb(136, 186, 60);
}

我已经尝试使用jQuery：

if(!$("#user_img").complete){
  $("#user_img").removeClass("user_img")
}

但这并不真正实现动态效果，所以边框将永远消失。是否有办法在重新加载时进行检查，并仅在图像完全加载后添加边框？
1
换个方式来做 - 当图像的load事件触发时，_添加_边框。 - CBroe
备选方案：在服务器端添加边框到图片（可以动态地添加或者在图片首次生成/上传时添加）。 - freedomn-m
我已经尝试过这个方法，但它也没有起作用。如果我这样做，边框要么一直消失，要么就一直存在。 - Ilian Gion Häsler
这个回答解决了你的问题吗？如何创建一个JavaScript回调函数来知道图像何时加载完成？ - 0stone0
3个回答
3

尝试使用JavaScript添加边框

<html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="style2.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
      </head>
      <body>
        <img src="https://picsum.photos/id/237/200/300" id="user_img" class="user_img">
      </body>
    </html>

js

<script>

$(document).ready(function(){
  document.getElementById("user_img").style.border = "2px solid rgb(136, 186, 60)";
});
</script>
1

将默认的border:none设置为无边框，创建一个带有边框样式的类，并在页面加载后通过JS添加它。

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

if (userImage.complete) {
  // add class if loaded yet
  userImage.classList.add('add-border')
} else {
  // wait load in otherwise
  userImage.addEventListener('load', () => userImage.classList.add('add-border'))
}
#userImg {
  /* no border here */
}

.add-border {
  border: 2px solid rgb(136, 186, 60);
}

1
你可以使用一些Javascript来处理这个问题。 

function myFunction(e) {
  e.classList.add("user_img");
}
.user_img {
  border: 2px solid rgb(136, 186, 60);
}
<img src="somepic.png" id="user_img" 
onload="javascript: myFunction(this)" 
onerror="javascript: alert('The image has failed to load')" />

<img src="https://t4.ftcdn.net/jpg/02/29/75/83/360_F_229758328_7x8jwCwjtBMmC6rgFzLFhZoEpLobB6L8.jpg" id="user_img2" 
onload="javascript: myFunction(this)" 
onerror="javascript: alert('The image has failed to load')" />

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接