Assets

Dynamic loading for JavaScript, CSS, and Images

Don’t embed assets on requests where they aren’t needed, or needed immediately. Load what you need on demand to optimize page speed and preserve bandwidth. You can asynchronously (or synchronously) load scripts as well as CSS and images. Work with groups and callbacks to solve complex problems.

$assets.load

Load assets with specified set of options

VariableTypeDefaultDescriptionRequired

options

object

-

Object parameters below

Configuration Object

VariableTypeDefaultDescriptionRequired

async

boolean

true

Loads assets asynchronously, only applicable to scripts

cache

boolean

true

Bust request cache with random querystring

styles

string, array

-

Single CSS path or array of CSS paths

error

function

-

Failure callback

files

string, array

-

Single file path or array of file paths

group

string

-

Optional reference for use with ready

images

string, array

-

Single image path or array of image paths

scripts

string, array

-

Single JavaScript path or array of JavaScript paths

root

string

-

Root path or domain override for root

success

function

-

Success callback

Single File

import $assets from 'wee-assets';

$assets.load({
    files: '/path/to/alert.js',
    success() {
        // Success logic
    },
    error() {
        // Failure logic
    }
});

Multiple Files

import $assets from 'wee-assets';

$assets.load({
    root: 'https://cdn.weepower.com',
    files: [
        '/path/to/alert.js',
        '/path/to/override.css',
        '/path/to/sample.png'
    ],
    success() {
        // Success logic
    },
    error() {
        // Failure logic
    }
});

If an absolute URL beginning with "//", "http://", or “https://” is requested the root option will be ignored.

Group

import $assets from 'wee-assets';

$assets.load({
    files: '/path/to/alert.js',
    group: 'dynamicAssets'
});

$assets.ready('dynamicAssets', {
    success() {
        // Success logic
    },
    error() {
        // Failure logic
    }
});

$assets.ready

When specified references are ready execute callback

VariableTypeDefaultDescriptionRequired

group

string

-

Group reference name

options

object

-

Override any load configuration options

poll

boolean

false

Poll the queue every 20 milliseconds for completion

Check

import $assets from 'wee-assets';

$assets.ready('dynamicAssets');
true

Check and Set

import $assets from 'wee-assets';

$assets.ready('dynamicAssets', {
    success() {
        // Success logic
    }
});

$assets.remove

Remove one or more files from the DOM

VariableTypeDefaultDescriptionRequired

files

string, array

-

Single file path or file array

root

string

-

Root path or domain override for root

Single File

import $assets from 'wee-assets';

$assets.remove('/samples/override.css');

Multiple Files

import $assets from 'wee-assets';

$assets.remove([
    '/samples/override.css',
    '/samples/alert.js'
], 'https://cdn.weepower.com');

$assets.root

Get current asset root or set with specified value

VariableTypeDefaultDescriptionRequired

value

string

-

Root request path

Set

The value set here is prepended to every request if not specifically overridden.

import $assets from 'wee-assets';

$assets.root('https://cdn.weepower.com');

Get

Retrieve the current root which defaults to an empty string, unless previously set.

import $assets from 'wee-assets';

$assets.root();
"https://cdn.weepower.com"

Advanced

Only set the asset root to a CDN in the production environment.

import { $env } from 'core/core';
import $assets from 'wee-assets';

if ($env() == 'prod') {
    $assets.root('https://cdn.weepower.com');
}

You can override the root on individual requests. For instance, you may want to load all your static assets from a CDN but pull JSON or other files from a local server.