Question

I’ve an html image element like the following and that should be hidden by default

<img 
  id="leftL" 
  src="anchors/Left.png"  
  style="
    width: 30px; 
    height: 24px;
    position:absolute;
    cursor:w-resize;
    visibility:hidden
  "
/>

But in some situations I need to show the image.

I’ve tried jQuery $("#leftL").css('visibility','visible') and $("#leftL").show().

Both are not working in my case. It will work, however, if I remove visibility:hidden from the style and hide it using $("#leftL").css('visibility','hidden').

I am loading big images in my page,so when I use $("#leftL").css('visibility','hidden') the Left.png will be visible for some time.

Is there any way to overcome this ?

Answer 1

Instead of CSS visibility property, use display property.

This is what jQuery .show() & .hide() changes, so your visibility states will be consistent.

This is roughly equivalent to calling .css(‘display’, ‘block’), except
that the display property is restored to whatever it was initially

http://api.jquery.com/show/

---

Therefore instead of:

• visibility:visible use display:block
• visibility:hidden use display:none