How to hide img elements that do not have src attribute, until the attribute is added?

StackOverflow https://stackoverflow.com/questions/585586

  •  06-09-2019
  •  | 
  •  

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)

Was it helpful?

Solution

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

OTHER TIPS

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

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top