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
  • 43,301
  • 14
  • 77
  • 113
Peter Penzov
  • 1,126
  • 134
  • 430
  • 808
  • 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,082,665
  • 372
  • 3,610
  • 3,555