Load New Content Into HTML Element Without Page Reloads – DynamicLoaderJS

Preview:

Description:

DynamicLoaderJS is a lightweight JavaScript library for dynamically updating any HTML elements of a webpage without full page reloads.

With DynamicLoaderJS, you can deliver an intuitive and seamless user experience akin to a single-page application (SPA) with just a fraction of the effort. It lets you introduce smooth animation effects during content transitions, enhancing the aesthetic appeal and interaction of your site.

How to use it:

1. Download and import the DynamicLoaderJS library into your document.

<script src="DynamicLoader.js"></script>

2. Add the data-load to the target element into which the DynamicLoaderJS injects new content from an external page.

<div data-load="external.html"></div>

3. More HTML data attributes to config the DynamicLoaderJS.

• data-target: Specify which section of the external page to be loaded into the current page
• data-loader: Determine whether to show a loading indicator while loading
• data-title: Change the document title after new content has been loaded

<div data-load="external.html"
     data-target="#content-to-load"
     data-loader="true" 
     data-title="New Content">
</div>

4. You can also load the new content using the load() method.

DynamicLoader.load('#selector', 'new-page.html');

5. DynamicLoaderJS supports the dynamic loading of CSS and JavaScript files, expanding its utility beyond just HTML content.

DynamicLoader.loadFile('new.css', 'css');
DynamicLoader.loadFile('new.js', 'js');