> For the complete documentation index, see [llms.txt](https://jscula.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jscula.gitbook.io/docs/ajax/loadresources.md).

# loadResources()

Load resources dynamically one time.

## `loadResources()` — Jscula Resource Loader

Jscula can automatically load **CSS and JavaScript** from a configuration file named:

```
jscula.config.json
```

***

### 📄 Config File Structure

```json
{ 
  "autoLoad": false, // If true (default), keyless resources load on page load. 
  "css": [
    "background.css", //keyless resource 
    "style.css" 
  ], 
  "scripts": { 
    "home": [
      "script.js" //keyed resource 
    ], 
    "contact": [
      "contact.js" 
    ], 
    "about": "../about.js", 
    "dashboard": [
      { 
        "src": "../client.js", 
        "defer": true, 
        "async": false, 
        "type": "module", 
        "id": "deferred-script", 
        //... all other script attributes can be passed here too 
        "position": "bottom" // bottom or top. this will determine where the resource will be placed, default is bottom. 
      }, 
      { 
      "src":"/stats.js" 
      } 
    ] 
  } 
}
```

***

## ⭐ How Auto Loading Works

* If `autoLoad` is **not false** (default = `true`) → **all keyless resources are loaded automatically.**
* Keyless = resources placed directly in:
  * `"css": [...]`
  * `"scripts": "main.js"`
  * `"scripts": ["main.js"]`

#### Example of keyless

```json
"scripts": "main.js"
```

or

```json
"scripts": ["..."]
```

***

### 🔧 Usage Patterns

{% stepper %}
{% step %}

#### Load resources by a single key

This will run all the resources specified under home.

```html
<!--in your html file. -->
<script>
    loadResources("home"); 
</script>
```

{% endstep %}

{% step %}

#### Load resources by multiple keys

This will run all the resources specified under home and dashabord.

```html
<!--in your html file. -->
<script>
  loadResources(["home", "dashboard"]); 
</script>
```

{% endstep %}

{% step %}

#### Load ALL keyed resources

This will run all the resources without a key. However, autoload is already doing this automatically, so this will not be necessary except the autoLoad is set to false.

```html
<!--in your html file. -->
<script>
  loadResources(); 
</script>
```

{% endstep %}

{% step %}

#### Conditional loading

```html
<!--in your html file. -->
<script>
    if (user.isLoggedIn) { 
        loadResources("dashboard"); 
    } 
</script>
```

{% endstep %}
{% endstepper %}

***

#### ✨ Notes

* Designed for **simplicity and flexibility** — beginners can use it immediately.
* Supports:
  * `async`, `defer`, `type`, `id`, ... etc, `position`
  * objects, arrays, keyless scripts, CSS
* Automatically resolves relative paths.