• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

JSF and image caching

 
Ed Mahoney
Greenhorn
Posts: 14
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I have a simple application with a graphic for the header(26k) and six image buttons(1k each, with mouseover images) for navigation on the left side. In IE and Safari, those images get reloaded with every submit or commandlink. Mozilla based browsers, however, seem to cache these images and you barely notice the page reload. Is there a way to force the browser to cache these images to make the reload much faster? I'm using Sun's reference implementation.

I have to say I like JSF, I'm very productive in JSF but this performance is not acceptable.

Thanks,

Ed
 
Kito Mann
author
Ranch Hand
Posts: 127
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Originally posted by Ed Mahoney:
I have a simple application with a graphic for the header(26k) and six image buttons(1k each, with mouseover images) for navigation on the left side. In IE and Safari, those images get reloaded with every submit or commandlink. Mozilla based browsers, however, seem to cache these images and you barely notice the page reload. Is there a way to force the browser to cache these images to make the reload much faster? I'm using Sun's reference implementation.

I have to say I like JSF, I'm very productive in JSF but this performance is not acceptable.

Thanks,

Ed


Ed,

Are you routing your image requests through the FacesServlet?
 
Ed Mahoney
Greenhorn
Posts: 14
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
this is the code I use for my buttons:

<h:graphicImage value="#{bdcommon.homeButtonReg}.jpg"
onmouse-over="this.src='#{bdcommon.homeButtonReg}on.jpg'"
onmouse-out="this.src='#{bdcommon.homeButtonReg}.jpg'"
style="border:none"/>

I have 6 menu buttons, each with three states. Each button is about 1600 bytes. each of these buttons is inside a commandlink statement. I'm not sure what you mean by 'through the FacesServlet'? This is the html that gets generated ( I deliberately hyphenated some of the code to post it here):

<a href="#" on-click ="document.forms['_id1']['_id1:_idcl'].value='_id1:menu:_id6'; document.forms['_id1'].submit(); return false;"><img src="images/homebutton.jpg;jsessionid=164731A88436193F21498741CF8C0CC3" onmouse-out="this.src='images/homebutton.jpg'" onmouse-over="this.src='images/homebuttonon.jpg'" style="border:none" alt="" /></a>

Thanks for the reply,

Ed
 
Kito Mann
author
Ranch Hand
Posts: 127
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Originally posted by Ed Mahoney:
this is the code I use for my buttons:

<h:graphicImage value="#{bdcommon.homeButtonReg}.jpg"
onmouse-over="this.src='#{bdcommon.homeButtonReg}on.jpg'"
onmouse-out="this.src='#{bdcommon.homeButtonReg}.jpg'"
style="border:none"/>

I have 6 menu buttons, each with three states. Each button is about 1600 bytes. each of these buttons is inside a commandlink statement. I'm not sure what you mean by 'through the FacesServlet'? This is the html that gets generated ( I deliberately hyphenated some of the code to post it here):

<a href="#" on-click ="document.forms['_id1']['_id1:_idcl'].value='_id1:menu:_id6'; document.forms['_id1'].submit(); return false;"><img src="images/homebutton.jpg;jsessionid=164731A88436193F21498741CF8C0CC3" onmouse-out="this.src='images/homebutton.jpg'" onmouse-over="this.src='images/homebuttonon.jpg'" style="border:none" alt="" /></a>

Thanks for the reply,

Ed


When I say "through the FacesServlet" I mean processed by JSF, which would include a relative URL. Try using an expression like
"#{externalContext.requestContextPath}/#{bdcommon.homeButtonReg}.jpg" instead. That generates an absolute URL, so it'll eliminate JSF from the equation. If you still have a problem, it might be a web server/web browser caching issue (that has nothing to do with JSF).
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic