Javascript load all resources

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Load all JS/CSS files from site website

License

ai/load-resources

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Load all JS/CSS files from site website.

var load = require('load-resources'); load('https://github.com/', '.css', function (css, url)  // All GitHub styles will be here >)

Also you can set a array of sites as first argument.

Third argument of callback will be boolean to indicate last file.

About

Load all JS/CSS files from site website

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Loads a single or multiple assets and returns a promise.

License

mattdesl/load-asset

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

A simple Promise-based asset loader with cross browser support down to IE 11. Ideal for use with async/await syntax. Uses fetch where possible, otherwise falls back to XMLHTTPRequest .

Tries to infer loader type from extension, but you can also specify a type for other extensions – see Loaders for details.

• Image tag (png, jpg, svg, etc)
• Audio tag (mp3, ogg, etc)
• Video tag (mp4, etc)
• JSON (json)
• Text (txt)
• Binary (bin)
• Blob

const load = require('load-asset'); async function printImageSize ()  // Load a single asset const image = await load('image.png'); // Print the image width and height after loading console.log(`Image Size: $image.width> x $image.height>`); >

Handles loading a single asset, or multiple assets in parallel. You can use a named object map for convenience, provide a progress callback for visual updates, and optionally continue loading if individual resources error out.

Note: You will need to polyfill Promise for older browsers.

const load = require('load-asset'); async function render ()  // Load markdown file as text string const readme = await load( url: 'readme.md', type: 'text' >); console.log(readme); // Load a list of named assets in parallel const urls = [ 'a.png', 'data.json', 'other.txt' ]; const items = await load.all(urls); console.log(items[0], items[1].some.data, items[2].toUpperCase()); // Load a map of named assets in parallel // But use 'any' instead of 'all' so that errors/404s // do not stop loading the rest of the assets. const assets = await load.any( diffuse: 'assets/diffuse.png', data:  url: 'path/to/api', type: 'json' >, arrayBuffer:  url: 'file.buf', type: 'binary' >, document:  url: 'file.pdf', type: 'blob' >, video:  url: 'file.mp4', muted: true > >); console.log(assets.diffuse); // tag console.log(assets.data.some.property); // JSON data >

npm install load-asset --save

Loads the item asset, which is either a string URL or an object with properties, and returns an asset Promise which will resolve to the loaded object (such as HTMLVideoElement, Audio or Image tags).

If item is an object, you can specify a list of options like so:

• url (required) — the URL to the asset
• type — the loader type name, can be ‘image’ , ‘audio’ , etc (see full list below). If not specified, it will be inferred from file extension if possible. If no loader is found by the extension, or no extension exists, the returned Promise will reject with an error.

Loaders may have individual options that can also be passed down into them, such as crossOrigin on Image:

const image = await load( url: 'foo.png', crossOrigin: 'Anonymous' >);

You can also pass a function to type if you have a custom loader, see test/custom-type.js for an example loading the Wavefront OBJ format. This way you can integrate other game/app-specific asset types into a single sequence of progress events.

assets = load.all(items, [progress])

This loads an array or map of items , loading them all in parallel, and returns the result when all are finished loading.

If you specify an array, the returned Promise resolves to an array of loaded values corresponding to the same order as the items . Alternatively, you can specify an object to receive back a map with named values.

async function start ()  // Resolves to an array of images const images = await load.all([ 'a.png', 'b.png' ]); console.log(images[0].width); // Resolves to an object mapping const assets = await load.all( normal: 'foo/normal.png', diffuse: 'foo/diffuse.png' >); console.log(assets.normal.width, assets.diffuse.width); >

You can optionally specify a progress callback function which gets triggered after each item is loaded, passed with an event object:

• count — number of items that have been loaded
• total — number of total items in the queue
• progress — a number between 0 (exclusive) and 1 (inclusive) of load completion
• target — an object or string representing the asset descriptor to load
• value — the loaded value for this target

Note: With this function, if one asset fails to load, the loading will stop and reject early.

assets = load.any(items, [progress])

The same as load.all , except that any errors in loading (for e.g. 404 assets) will be caught and resolved to null , so that other assets can continue loading.

If a resource did not load, an additional error property will be added to the progress callback event for that resource.

async function start ()  // Resolves to an array of images const results = await load.any([ 'a.png', 'b.png' ], ( error >) =>  // Log error to avoid developer errors if (error) console.error(error); >); // Filter out any images that couldn't load const images = results.filter(Boolean); // . do something . >

If you pass a Promise to the load funtion, it will simply be returned. This allows for nesting features, for example:

loader.all( tiles: loader.all([ 'a.png', 'b.png', 'c.png' ]), group: loader.all( iconA: 'bar.png',, iconB: 'foo.png' >) >).then(assets =>  console.log(assets.tiles[0], assets.group.iconA.width); >);

All loaders, their inferred extensions, and any additional options are detailed below. You can specify a type option, such as ‘image’ or ‘blob’ , to override the extension lookup.

Extensions: jpg, jpeg, svg, png, gif, webp, bmp, tga, tif, apng, wbpm, ico

Resolves to an Image tag. You can also pass crossOrigin in options for images, e.g. < crossOrigin: 'Anonymous' >.

Extensions: json

Resolves to parsed JSON data.

Extensions: txt

Resolves to a text string.

Audio Extensions: mp3, ogg, wav, midi, and more
Video Extensions: mp4, m4v, mov, mkv, mpeg, and more

See here for all inferred audio and video extensions.

Additional options for audio & video types:

• crossOrigin — e.g. ‘Anonymous’
• event — the load event to wait for, default ‘canplay’ , can also be: ‘canplaythrough’ , ‘loadeddata’ , ‘loadedmetadata’
• Additional media properties: volume, preload, playbackRate, muted, currentTime, controls, autoPlay

Extensions: bin

Resolves to an ArrayBuffer.

Not associated with any file extensions.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Async loader JS and CSS files

License

ildar-ceo/loadjs

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Async loader JS and CSS files

wget https://raw.githubusercontent.com/vistoyn/loadjs/master/index.js -O ldjs.js 

Async load js and css files from arr

• arr — Array of the css and js files
• message (необязательно) — delivery message after load resource.
• deftype (необязательно) — default type of the resource, if extension does not exists.

The function return object $loadObj

$load('/assets/jquery/jquery.all.js', 'jquery_loaded') .success(function() console.log('Jquery loaded'); >) // Load jquery plugins .load([ '/assets/jquery/jquery.form.js', '/assets/jquery-ui/jquery-ui.min.js', '/assets/jquery-ui/jquery-ui.min.css' ]) // The script main.js loaded after 3 previous resources .load('/assets/main.js') // Call success function after load all resources .success(function() console.log('All resources have been loaded'); >)

Subscribes when all resources in the arr is loaded, then run callback function

The function return object $loadObj

$load.onLoad([ '/assets/jquery/jquery.form.js', ]) .deliver('jquery_form_loaded') .success(function() console.log('Jquery form is loaded'); >);

Subscribes when all messages are delivered, then run callback function

The function return object $loadObj

$load.subscribe('jquery_form_loaded', function() // Create jquery form . >);

$load.sload(event, arr, message, deftype)

Subscribe and load. Equivalent:

$load.subscribe(event).load(arr, message, deftype);

$load.alias('jquery', '/assets/jquery/jquery.all.js'); $load.alias('jquery_ui', [ '/assets/jquery-ui/jquery-ui.min.js', '/assets/jquery-ui/jquery-ui.min.css' ]); $load.alias('jquery_form', '/assets/jquery/jquery.form.js'); // Load jquery $load('jquery', 'jquery_loaded') // Load jquery plugins after jquery load $load.sload('jquery_loaded', 'jquery_ui', 'jquery_ui_loaded'); $load.sload('jquery_loaded', 'jquery_form', 'jquery_form_loaded');

$load(['/assets/jquery/dist/jquery.min.js']).load(['/assets/jquery-migrate/jquery-migrate.min.js']) .success(function() $load.deliver('jquery_loaded'); >);

$ldjs.subscribe('jquery_loaded', function() // jquery.inputmask $load(['/assets/jquery.inputmask/dist/min/inputmask/inputmask.min.js', 'jquery_inputmask_loaded']); >);

About

Async loader JS and CSS files

Источник