Load New Content Into HTML Element Without Page Reloads – DynamicLoaderJS

Category: Javascript , Loading | March 15, 2024
Views Total:41 views
Official Page:Go to website
Last Update:March 15, 2024


Load New Content Into HTML Element Without Page Reloads – DynamicLoaderJS


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-title="New Content">

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');



  • Bugfixes

You Might Be Interested In:

Leave a Reply