On my page I have many component and all component render at the time of page load so due to the cause page load time happens more So is there any solution any one have that cpmponent render on scroll event on page only.
The obvious way to do this would be to split things up in to a core page and a series of data feed pages on the server then load content progressively via AJAX/AJAJ calls on the client side.
For example start by creating a set of data components that render data in XML rather than HTML format. Next create a series of data pages, ,with the "XML" page type and add one data component to each.
Next create an AJAX component that basically takes a data URL and outputs some wrapper HTML and either an inline JS block or data attribute to 'register' the component with a central progressive content loading client-side JS function.
Finally create your 'public' page and add any 'direct' rendering components like the header/footer and maybe the initial content you want to display at the top of the page. Below this add as many instances of your AJAX component as necessary, pointing each to the data page that will feed them.
The final piece of the puzzel is a client-side progressive content loading script that waits until the page has loaded and then either works through the AJAX components calling their data URLs and injecting HTML in to the page DOM inside the corresponding component, or waits for scroll events before triggering an AJAX component's URL.
Can you explain the same things with an small example...
Hello,
First of all you should be knowing how to implement the same with plain html pages. If not, this reply won't help you.
HTML Concept:
Lets say you've home.html with header, sectionA, sectionB, sectionC, sectionD, footer etc contents. and as load performance is poor, you decided to show header, sectionA, sectionB on load of the page as they cover one full screen content, and on scroll you want to get sectionC, sectionD, footer content add to the HTML dom by ajax calls one by one. In this implementation you've home.html along with sectionC.html, sectionD.html, footer.html. Once you implement this with your HTML developer and everything(script, user experience with scrolling, binding events of fetched content if any etc) ready, here are the steps to implement the same with .page concept.
PAGE Concept:
create your home.page with header, sectionA, sectionB, sectionC, sectionD, footer etc components. but for components which you wanted to show content by ajax call on scroll, don't do any code processing in your external return simply dummy document and actual result document only when it is called by AJAX call with /home/sectionCComponentID.ajax. this means for components sectionC, sectionD, footer have below signature.
<Data><External><Object Scope="local">com.aneel.external.GlobalExternal</Object><Method>executeSectionC</Method></External><AjaxOutput Object="com.aneel.external.GlobalExternal" Method="transformAjaxResponse"/></Data>
in your java methods of executeSectionC, transformAjaxResponse have a below condition to execute the actual component functionality.
"XMLHttpRequest".equals(context.getRequest().getHeader("X-Requested-With"));
executeSectionC - will get the result XML document of sectionC component (your usual coding)
transformAjaxResponse - can transform that result XML document to HTML (below will transform)
PrintWriter writer = context.getResponse().getWriter();
ComponentTransformData data =
((RuntimeComponent) context.getThisComponent()).transform((BaseRequestContext) context,
null);
if (null != data &&"XMLHttpRequest".equals(context.getRequest().getHeader("X-Requested-With"))) {
context.getResponse().setContentType("text/html");
LOGGER.debug("This is an AJAX request");
LOGGER.debug("data.getData()" + data.getData());
writer.print(data.getData().toString());
}
Hope this helps.
