LayX
Download
Getting started
Introduction Installation Quick Start CLI
Core Concepts
Overview
Customize
Customize
Layout System
Breakpoints Container Component Layout Component
Main
Base Typography
Components
Alert Breadcrumb Button Card Carousel Chart Dialog Draggable Form Footer Media Navbar Pagination Popover Sheet Section Tab Tooltip Window
Helpers
Flex and Grid Layout
Utilities
Border Color Display Flex Grid Height Margin Opacity Padding Position Shadow Width Z-index
Others
Background Dynamic Render Icon PWA Partial Render Scroll Driven Animation Smooth Scroll Syntax Highlighter Theme View Transition
About
Contributing License
Partial Render

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.

Key Features
  • Efficient AJAX-based partial page updates.
  • Link prefetching to anticipate navigation and speed up page loads.
  • Configurable caching with automatic cache purging to optimize memory usage.
  • Built-in retry and timeout mechanisms to handle network issues.
  • Seamless integration with browser history for native-like navigation.
  • Custom event hooks for pre-fetch, pre-render, and post-render customization.
Example

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!'); } });
Configuration Options

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.
Important Notes
  • Ensure the target element (with .partial-render) exists on the page.
  • Prefetched content is cached until cache limit is reached, then older entries are purged.
  • Timeout and retry settings ensure resilient loading under poor network conditions.
  • Use the restoreInitialContent() method to reset the initial page state.
See example
On This Page
Partial Render Key Features Example Configuration Options Important Notes