Is there a way to make a graphicimage in Primefaces execute the "value" method only on demand?

Question

I want to show a custom gallery with several thumbnails. When clicking on one of these, an overlaypanel is shown, containing a graphicimage with the image in higher quality. Since the high quality images are aroung 5MB each, I just want to load them on demand.

I already tried using the "rendered" attribute, but that did not seem to do the trick either. I also tried the "onclick" with a javascript function, but that also did not yield the expected result.

<p:graphicImage value="#{dataHolderBean.imageHolderBean.loadFullSizeImage()}"
class="centeredImageOverlay" cache="false">
<f:param name="currentImageId" value="#{images.imageId}" />
</p:graphicImage>

I would like to just call value="#{dataHolderBean.imageHolderBean.loadFullSizeImage()}" this method, when clicking on another image.

Answer 1

Why did you not look for a solution that loads the content of the overlay panel lazy? That to me sounds like a much more generic solution (anything inside it would be loaded lazy then) you stand and a higher chance of something already being implemented.

From the PrimeFaces showcase of the p:overlayPanel(emphasis mine)

Overlay Panel

OverlayPanel is a generic container component that can overlay other components on page. Notable features are custom positioning, configurable events and effects. Lazy content loading to reduce page load time is also supported via dynamic option, when enabled overlayPanel will load the contents just before being shown.

From the PrimeFaces documentation

Dynamic Mode

Dynamic mode enables lazy loading of the content, in this mode content of the panel is not rendered on page load and loaded just before panel is shown. Also content is cached so consecutive displays do not load the content again. This feature is useful to reduce the page size and reduce page load time.

So the lazy loading is done via the dynamic attribute which has an example even in the showcase

<p:commandButton id="movieBtn" value="Dynamic" type="button" />
<p:overlayPanel id="moviePanel" for="movieBtn" hideEffect="fade" dynamic="true" style="width:600px" modal="true">
    ...
</p:overlayPanel>