Dynamically load page includes

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)

Hey Zach,

In my experience, unchecking the lazy load checkbox impacts page performance, so no, I do not want the page includes to load on initial page load. I want something like a callback function, which I can invoke via a JS snippet and which will trigger the page includes to load only after the document has completed its initial load.

Since it’s possible to force the page include to lazy load, I imagine there is some kind of function I call to do this, however I can’t find anything like that in your documentation.

Thanks!

Kathryn, there is a way to do this:

If your Page Include component’s Unique Id is “MyPageInclude”, you can use the Component instance method “load” to cause the Page Include to load:

skuid.$C(“MyPageInclude”).load();

You can pass in a callback function that will tell you once the Page Include is loaded:

skuid.$C(“MyPageInclude”).load(function(){ console.log(“My Page Include just got loaded!”); });

Thanks Zach, it’s helpful to hear more about the component instance. Unfortunately this still doesn’t seem to work because the page includes are inside a tab set and therefore are undefined at the moment I’d like to start loading them. Any way around this?

As I said in my earlier post, you have to UN-check “Defer rendering of tab contents” on the Tab Set’s properties. That way the Page Include components within the non-active tabs will exist on page load for you to call .load() on.

Just finally tried this out and it works a treat. Thanks 🙂

Does this anything other default behavior? Seems to me that Page Includes load after page load anyway.

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.

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.?

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 🙂

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.

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.”