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

February 12, 2016

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.

👋 I'm Ashik Nesin • Principal Software Engineer @Chargebee 👨‍💻• I write about web development & behinds the scenes of startup/side projects that I'm building

© 2022 Nesin Technologies LLP