IMG without src

Question

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 compatibility 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)

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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)?

Answer 6

The solution is quite simple:

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