如果img仍在加载，请删除边框

所以我在我的项目中有一个个人资料图像，我希望它有一个绿色的边界。但每次我重新加载页面，图像消失了一小会儿，但边框仍然存在。我想问是否有任何方法，也许用JavaScript删除css中的border元素如果图像尚未加载

这是我的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")
}

但是这并不能动态地工作，所以边界将永远消失。有没有办法检查重新加载，只添加边界，如果图像是完全加载?

尝试用js添加边框

<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>

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

设置默认的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);
}

你可以使用一点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')" />

相关内容

最新更新

热门标签：