Manipulate image placeholder while image source is being loaded or broken using CSS

Question

Before image gets loaded it displays an image placeholder with a border, that can't be removed. So I would like to hide or replace default image placeholder.

I'm after a CSS-only solution avoiding Javascript code.

My current CSS looks like this:

img {
    width: 50px;
    height: 50px;
    border: 1px solid #f4f4f4;
    border-radius: 25px;

    -webkit-background-clip: border-box;
    -moz-background-clip: border-box;
    background-clip: border-box;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Here's a jsFiddle where first image is broken and its placeholder is visible and therefore annoying because it distorts original image border.

What I tried

I've tried the content trick to remove placeholder altogether, but that also removes the actual image if it's not broken and should be displayed.

display: inline-block;
content: "";

Anybody has a solution to this?

Answer 1

@maak already replied the same answer below

for FF

-moz-force-broken-image-icon: <integer>;

is an extended CSS property.

Examples

img {
  -moz-force-broken-image-icon: 1;
  height:100px;
  width:100px;
}

<img src='/broken/image/link.png' alt='Broken image link'>

Read Here

For other browsers I am not sure about such property, but a jquery although you want to avoid it

// Replace source
$('img').error(function(){
        $(this).attr('src', 'missing.png');
});

// Or, hide them
$("img").error(function(){
        $(this).hide();
});