Skip to main content

Is there a way to load a model or models after the page has been loaded?  I have a sidebar with 4 different models in it for easy access to items for my team, problem is that if those 4 models load initially, it really slows the page down.  I created a button to “Load Sidebar” but users are not using it, thus the sidebar has become pretty useless.

What method can I take to load the models after the rest of the page has finished loading, thus not slowing down the initial page load, and still providing the data to users?

I’ve used page includes to achieve this in the past.


Pat’s advice about Page Includes is good, the only other declarative approach is to have the Models’ data loaded later via user interaction (such as when an initially-hidden tab is first shown, or in response to a button press as you tried in your approach.

I have converted this Question to an Idea because it is on our roadmap to provide a declarative way to allow “lazy-loading” of Model data after initial page load.

The only other approach is to use JavaScript, you can trigger the loading of the Models’ data as soon as the page has initially rendered like this:


(function(skuid){<br />&nbsp; &nbsp;skuid&#46;$("&#46;nx-page")&#46;one("pageload", function(){<br />&nbsp; &nbsp; &nbsp; &#47;&#47; Names of Models to lazy load<br />&nbsp; &nbsp; &nbsp; var modelsToLazyLoad = a<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Contacts",<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Tasks",<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "OtherStuff"<br />&nbsp; &nbsp; &nbsp; ];<br />&nbsp; &nbsp; &nbsp; skuid&#46;model&#46;load(skuid&#46;$&#46;map(modelsToLazyLoad, function(modelName) {<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return skuid&#46;model&#46;getModel(modelName);<br />&nbsp; &nbsp; &nbsp; });<br />&nbsp; &nbsp;});<br />})(skuid);