Remove border from img if its still loading

Question

So I do have a profile image in my project, and I want it to have a green border. But everytime I reload the page, the image dissapears for a short moment, but to border still remains. I wanted to ask if there is any way, maybe with JavaScript to remove the border-element in css if the image is not loaded yet

This is my html:

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

and this is my css:

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

I already tried this with jquery:

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

But this doesn't really work dynamically, so the border would just dissapear forever. Is there any way to check on reload and only add the border if the image is fully loaded?

Do it the other way around - add the border, when the load event for the image fires. — C3roe
– C3roe, Commented Dec 5, 2022 at 9:52
Alternative for consideration: add the border to the image server-side (either dynamically or when the image is first generated/uploaded). — fdomn-m
– fdomn-m, Commented Dec 5, 2022 at 9:54
I already tried this, it didn't work aswell. If I do it like this, the border is either gone all the time, or just stays. — Ilian Gion Häsler
– Ilian Gion Häsler, Commented Dec 5, 2022 at 9:56
Does this answer your question? How to create a JavaScript callback for knowing when an image is loaded? — 0stone0
– 0stone0, Commented Dec 5, 2022 at 10:11

Jaswinder Kaur · Accepted Answer · 2022-12-05 09:56:36Z

3

Try to add border with 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>

js

<script>

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

answered Dec 5, 2022 at 9:56

Jaswinder Kaur

1,6346 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gureenkov56 · Accepted Answer · 2022-12-05 10:05:08Z

1

Set default border:none, create class with border style and add it by JS after load.

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);
}

answered Dec 5, 2022 at 10:05

gureenkov56

1723 bronze badges

Comments

Gerard · Accepted Answer · 2022-12-05 10:06:59Z

1

You can use a bit of Javascript to handle this.

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')" />

answered Dec 5, 2022 at 10:06

Gerard

15.8k5 gold badges33 silver badges53 bronze badges

Collectives™ on Stack Overflow

Remove border from img if its still loading

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related