Dynamically load page includes

  • 2
  • Question
  • Updated 2 years ago
  • Answered
Hi everyone,

I use page includes on a model-heavy page to avoid initial load speed getting too heavy. However, I'd love it if, instead of users having wait while each tab they click into lazy loads, I could trigger all page includes to load upon the document ready event (or similar). 

I imagine this working somewhat like so:

* Page completes initial load
* Use JS snippet to detect page includes
* Trigger lazy loading of page includes automatically

Does anyone know of a way to do this?
Photo of Kathryn Castle

Kathryn Castle

  • 814 Points 500 badge 2x thumb

Posted 2 years ago

  • 2
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,004 Points 20k badge 2x thumb
If you want the Page Includes to start loading immediately on initial page load, then you should be able to do this just by setting the following settings on your Tab Set and on your Page Includes:

- Tab Set: UN-check "Defer rendering of tab contents"
- Each Page Include: ensure that "Lazy Load" is UN-checked (should be the default)
Photo of Kathryn Castle

Kathryn Castle

  • 814 Points 500 badge 2x thumb
I think it's different because these page includes are inside a tab set. This allows me to set the page includes to lazy load, minimising initial load time impact, then load them asynchronously once the page has initially rendered.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,704 Points 20k badge 2x thumb
er .. uh ... has this post been edited? Wasn't there something about component.load()?

My understanding is that setting the Tabset and Page Include without any Defer or Lazy Load produces the behaviour you desire. As in load primary page models then load primary page components. In loading the primary page components. page includes the process for the pages they refer to.

My understanding is that initial page loads the primary page model and then components (HTML/Page) synchronously. Then since all Page Includes are rendered at the same time, then all Page Includes would load asynchronously.

Zach and Co.?
Photo of Kathryn Castle

Kathryn Castle

  • 814 Points 500 badge 2x thumb
No, this post hasn't been edited. I think there must be some confusion.

My original question is based on the assumption that a page include (lazy load unchecked) would be loaded synchronously along with other components upon initial page load and could therefore impact how quickly a page renders. If this assumption is incorrect, then I see your point!

I'll be curious to hear as well :)
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,004 Points 20k badge 2x thumb
Pat, I would agree with you about using the built-in Defer Tab Rendering and Lazy Load Page Includes settings, but I'm not exactly sure what Kathryn's setup is, so I can imagine there are circumstances where you could fine-tune the timing of loading if you handled it manually via javascript. In general, though, I'd recommend just using the native functionality of Defer Tab Rendering and Lazy Loading of Page Includes.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,704 Points 20k badge 2x thumb
So leaving everything unchecked works as follows?

"My understanding is that initial page loads the primary page model and then components (HTML/Page) synchronously. Then since all Page Includes are rendered at the same time, then all Page Includes would load asynchronously."