1

I have a JSF page with very big images - 3.4 Mb. I use this code to call the image

<div data-src="resources/images/slide1.png">

Is there any way to cache the image into client browser because every time it takes 3-4 seconds to download the picture?

Pavlo
  • 40,007
  • 13
  • 74
  • 108
Peter Penzov
  • 2,352
  • 100
  • 358
  • 675
  • 1
    Why do you need 3.4MB slides? Thought of optimizing the images? – Stefan Sep 11 '15 at 10:13
  • By default, everything obtained by a GET request is cached in the browser. And images are loaded using GET :) – Lauromine Sep 11 '15 at 10:15
  • `png`'s are really bad for large images (such as photos)... consider using `jpg` format instead and you'll probably find the size of the image is just a fraction of the original – freefaller Sep 11 '15 at 10:29
  • 1
    possible duplicate of [JSF Cache Static Resources Filter](http://stackoverflow.com/questions/15057932/jsf-cache-static-resources-filter) – TheSM Sep 11 '15 at 10:34
  • 1
    @TheSM: that won't work if the resource is not referenced as a JSF resource. – BalusC Sep 11 '15 at 12:21
  • @BalusC oh yes, you are so much right forgot about that glad you mentioned that – TheSM Sep 11 '15 at 12:32

1 Answers1

4

Reference it as JSF resource. Then JSF resource handler will automatically take care of caching. Its default expiration time is configurable in web.xml.

So instead of

<div data-src="resources/images/slide1.png">

do

<div data-src="#{resource['images/slide1.png']}">

See also:

Community
  • 1
  • 1
BalusC
  • 1,040,783
  • 362
  • 3,548
  • 3,513