My JS code includes some images that are empty at the beginning (without src attribute specified at all + display:none).

When added to sites with CSS1 patibility I see broken image icon where the image should be even though the images are supposed not to be displayed (display:none).

Any idea how I can hide the broken image icons?

Notes: I don't want to load empty images. I tried width and height= 1px or 0px . didn't work. specifying src="" also gives empty image icons.

Edit: I found the solution: add style="display:none" to the img definition (Not in CSS)

My JS code includes some images that are empty at the beginning (without src attribute specified at all + display:none).

When added to sites with CSS1 patibility I see broken image icon where the image should be even though the images are supposed not to be displayed (display:none).

Any idea how I can hide the broken image icons?

Notes: I don't want to load empty images. I tried width and height= 1px or 0px . didn't work. specifying src="" also gives empty image icons.

Edit: I found the solution: add style="display:none" to the img definition (Not in CSS)

• javascript
• image
• src

6 Answers 6

Have you tried wrapping the images inside a div and hiding the div instead?

My JS code includes some images that are empty at the beginning (without src attribute specified

That's not a valid state for an image. Best use a placeholder transparent image or leave the image out of the DOM until you can set a ‘real’ src attribute.

I see broken image icon where the image should be even though the images are supposed not to be displayed (display:none).

Doesn't happen for me, either ‘display: none’ or ‘visibility: hidden’ removes the visible image from the page. Example code demonstrating the problem, and which browser(s)?

The solution is quite simple:

add style="display:none" to the img definition (Not in CSS)

how about just having a placeholder div tag and replacing it with an image when the time es to show the image? any decent ajax framework (e.g. jQuery) will make this easy to do so it works across all major browsers

in addition to display:none, maybe try setting visibility:hidden

If you are using a JavaScript library it may be worth applying a class to name to all of these images and letting the library handle it. Prototype example using a class name of myImages would be

var images = $$('.myImages');

if (image != null)
{
    for (int i = 0; i < images.Length; i++)
    {
        images[i].hide;
    }
}

You would still need to add the style attribute style="display: none;" to the images