PDA

View Full Version : Performance issue when using images for buttons



Dhi
11 Jul 2011, 5:33 AM
Hi All,

I created an application and using images for buttons.
I created classes for buttons and assigned cls and pressedCls to them, but its taking time to load these images.
Is there any other better option to do the same, please share if anyone have any idea regarding the same.

Thanks in advance,

Dhiraj Gupta

bharatn
11 Jul 2011, 3:21 PM
Encode the image in base 64 and add in css via url("data:image/png;base64,....). This will save on server roundtrip times.

This works when the image size is really small i.e few kb

Shranes
11 Jul 2011, 8:48 PM
@Dhiraj how did u manage to include image over button? i got issues with it.

i defined the url, size, background color in the .scss file.. the size n background color are implemented in the button, but the image doesn't appear.

plz let me know if u can help

Dhi
12 Jul 2011, 7:13 AM
@bharatn : Thanks man.

Whats about css sprite?

@Shranes : i used it as


{ xtype: 'button', cls: 'temp_button', pressedCls: 'temp_button_pressed', text: 'Open', name: 'Open'}

.temp_button
{
background-image: url(../images/TempButtonNormal.png) !important;
background-repeat: no-repeat;
background-color : White !important;
border: 0 !important;
width: 71px !important;
height: 54px !important;
background-position: center;
font-family: Arial !important;
font-size: 16px !important;
border-radius: 0em !important;

}

Shranes
12 Jul 2011, 7:54 PM
thanks Dhiraj..it works :)