2

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.

Kukeltje
  • 12,223
  • 4
  • 24
  • 47
user3907491
  • 275
  • 1
  • 3
  • 8
  • 1
    Why not look for a solution that loads the **content of the overlay panel** lazy? Sounds like a much more generic solution and a higher chance of something already being implemented – Kukeltje Feb 11 '19 at 09:40
  • @Kukeltje That is a great idea! Still can't find a working solution for that though :/ – user3907491 Feb 11 '19 at 09:48
  • 1
    **always, always, always** try to see a more generic question/problem behind a specific one. Much more chance on finding a solution then. And the PF showcase has a working solution... – Kukeltje Feb 11 '19 at 09:52

2 Answers2

3

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>
Kukeltje
  • 12,223
  • 4
  • 24
  • 47
  • Thank you so much! You really helped me here. I will also try to find more generic solutions from now on. I have been working on this for a coupld of days now, not really getting anywhere :/ Cheers! – user3907491 Feb 11 '19 at 09:58
3

You can use the built-in LazyDefaultStreamedContent in your bean, to lazy initialize the stream:

streamedContent = new LazyDefaultStreamedContent("application/vnd.ms-excel", "myExcel") {
    @Override
    protected InputStream initStream()
    {
          return new FileInputStream(...);
    }
};
tandraschko
  • 2,291
  • 13
  • 13
  • Does this work for images too? And when is it loaded then? I sort of fail to see (and that is very likely to be related to my limited view/knowledge) where this would fix something in the question above. If you can add some explanation, that would be great (and worth an upvote) – Kukeltje Feb 11 '19 at 20:23
  • Well, this would not solve my problem, but it helped me by replacing my "DefaultStreamedContent". Thank you! – user3907491 Feb 15 '19 at 07:58