Home/ Questions/Q 7700197
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T22:39:10+00:00

Inside a page I am having a TR on which when user click it

  • 0

Inside a page I am having a TR on which when user click it change it’s color to blue and arrow color to white. This is achieved by changing elements’ class dynamically.

But due to this what happen is, when user click on TR user saw image loading delay. How to preload that CSS image.

this.className = this.className + " active";

CSS

.table td.arrow div {background-image:url("../stuff/arrow.png");}  
tr.active td.arrow div { background-image:
url("../stuff/arrow_active.png"); }

Image

Update
One more thing want to update that static content is getting loaded from other server.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The browser only loads images from the CSS that are shown. So you could place your arrow_active image in a element, that is visible but has no opacity.

    But i would suggest you use sprites: Less HTTP requests + no preloading problems: css-tricks.com/css-sprites , alistapart.com/articles/sprites

    You could solve your problem like this with pure CSS.

    http://jsfiddle.net/Q6dTf/

    Alternatively you could use a :before pseudo element if you dont want to add a new HTML element.

    • 0