How To Hide An Image Without A Source (and Why You Should Do It)

As a web developer, you might have experienced a scenario where you have to set source of image dynamically.

For say, we get source an image via API and we set it dynamically via JavaScript.

Why bother to hide image?

Well… Here’s why Response from an API and processing your cool JavaScript might take few millisecond if not second. Until then your image might as awful as this one.

Images with No source

And here’s how I solve it with just CSS

img {
    visibility: hidden;
}
img[src] {
   visibility: initial;
 }

Basically it’ll make the visibility of all image hidden until source is set to them.