The PartialRender
class dynamically fetches and updates sections of a webpage without requiring full reloads,
enhancing user experience and reducing load times by asynchronously fetching content.
For example, see our documentation pages, where Partial Render powers the seamless navigation experience. Since the overall structure remains consistent, side navigation links serve as partial links. Main content is pre-fetched for faster load times, and the dynamic progress indicators are generated in real-time as you scroll.
Initialize PartialRender
with custom options:
import { PartialRender } from './others/partial_render/partial_render.js';
new PartialRender('.partial-render', '.partial-link', {
partialPath: 'fragments/',
throttleTime: 20,
timeout: 7000,
onSuccess: (partial, content) => {
console.log('Loaded:', content);
},
onError: (partial, error) => {
alert('Loading error!');
}
});
Customize PartialRender
with these options:
Option | Default | Description |
---|---|---|
fetch |
true |
Enable AJAX fetching of content on link click. |
preFetch |
true |
Automatically prefetch links when in viewport. |
handleNavigation |
true |
Push states to history during partial load. |
defaultAction |
true |
Determines if content should be injected into the target element after fetch. |
partialPath |
'partial/' |
Path prefix for fetching partial content files. |
maxPrefetchLimit |
150 |
Limits the number of links prefetched. |
maxCacheSize |
250 |
Maximum number of partials stored in cache. |
observerOptions |
{ rootMargin: '50px' } |
Options for the IntersectionObserver (used for prefetching). |
throttleTime |
10 |
Throttle delay for prefetch observation (in ms). |
timeout |
5000 |
Time to wait before aborting a fetch request (in ms). |
retryAttempts |
2 |
Number of times to retry a failed fetch. |
retryDelay |
1000 |
Delay between fetch retries (in ms). |
onSuccess |
null |
Callback triggered after successful render. |
onError |
null |
Callback triggered after a fetch error. |
onNavigationChange |
null |
Triggered when navigation occurs (popstate or pushState). |
beforeRender |
null |
Callback before content is injected. |
beforeFetch |
null |
Callback before a fetch request is initiated. |
debug |
false |
Enables console logging for debugging. |
.partial-render
) exists on the page.restoreInitialContent()
method to reset the initial page state.