Git Product home page Git Product logo

preloader's Introduction

Preloader

experimental

A library for loading common web assets

Usage

NPM

preloader

The preloader is capable of loading almost all types of files, if it does not understand a file type, it will attempt to load it as a basic xhr request. It extends the nodejs event emitter and uses the following events.

progress: Event Sends updates on loading progress to other part of application (loading ui) complete: Event Notifies loading completion to other part of application

Here is a common usage of the preloader.

var preloader = require('preloader');
var loader = preloader({
  xhrImages: false
});
loader.on('progress',function(progress) {
  console.log(progress);
});
loader.on('complete',function() {
  var data = loader.get('site_data.json');
  console.log('all content loaded!');
});
loader.add('video1.mp4');
loader.add('test_image.jpg',{
  onComplete: function(content) {
    document.body.appendChild(loader.get('test_image.jpg'));
  }
});
loader.add('site_data.json');
loader.load();

new Preloader(options) / preloader(options)

This creates a new instance of the preloader on which on you use the following api. It is not a singleton and must be instantiated to use. The options object contains the following properties.

xhrImages Loads images via XHR and converts to a Blob instead of the image tag, default: false onComplete A function to attach to the complete event onProgress A function to attach to the progress event throttle A integer specifying maximum amount of connections at a time, 0 = infinite

add(url, options)

Generic asset loader function - determines loader to be used based on file-extension

url: String URL of asset options: Object Custom options to override the global options created at instantiation, can also pass in onComplete and onProgress to listen to the events on this particular item.

addImage(url ,options)

Load image - uses the LoaderImage loader

url: String URL of asset options: Object Custom options to override the global options created at instantiation, can also pass in onComplete and onProgress to listen to the events on this particular item.

addJSON(url, options)

Load JSON - uses the LoaderJSON loader

url: String URL of asset options: Object Custom options to override the global options created at instantiation, can also pass in onComplete and onProgress to listen to the events on this particular item.

addText(url, options)

Load text - uses the LoaderText loader

url: String URL of asset options: Object Custom options to override the global options created at instantiation, can also pass in onComplete and onProgress to listen to the events on this particular item.

addVideo(url, options)

Load video - uses the LoaderVideo loader

url: String URL of asset options: Object Custom options to override the global options created at instantiation, can also pass in onComplete and onProgress to listen to the events on this particular item.

addAudio(url, options)

Load audio - uses the LoaderAudio loader

url: String URL of asset options: Object Custom options to override the global options created at instantiation, can also pass in onComplete and onProgress to listen to the events on this particular item.

addImage(url, options)

Load image - uses the LoaderImage loader

url: String URL of asset options: Object Custom options to override the global options created at instantiation, can also pass in onComplete and onProgress to listen to the events on this particular item.

addFromLoaderType(url, loaderType, options)

Load asset using custom loader

url: String URL of asset loaderType: function Custom loader function options: Object Custom options to override the global options created at instantiation, can also pass in onComplete and onProgress to listen to the events on this particular item.

setPercentage(url, percentageOfLoad)

Sets percentage of total load for a given asset

url: String URL of asset percentageOfLoad: Number representing percentage of total load

load()

Begins loading process

stopLoad()

Stops loading process

get(url)

Retrieves loaded asset from loader

url: String URL of asset Returns: asset instance

reset()

Resets loading so you can reuse the preloader. does not remove cached loads so get() continues to function for all assets.

License

MIT, see LICENSE.md for details.

preloader's People

Contributors

arjunvegda avatar iranreyes avatar jephuff avatar neo avatar njam3 avatar renarsvilnis avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

preloader's Issues

Final onProgress value is not always 1

When listening to on progress, the final value returned is not always 1 when complete. Sometimes, it will return total files minus 1 (ie. for 6 files, the final value returned is sometimes 0.833...).This can also be observed in preloader.percTotal (which is never 1 and always totalFiles - 1 but I don't know if that is an issue).

It doesn't select the right loader if the file has dots

If the asset to preload has the format [filename](.[A-Z]*)*.[extension] then the loader pick up the generic one.

After some debug I found that the get extension method needs some improvements:

module.exports = function getExtension (url) {
  var ext;

  if (isBase64(url)) {
    var mime = base64Mime(url);
    ext = (mime.split('/'))[1];
  } else {
    ext = url.split('.').pop();
  }

  return ext || null;
};

Add support for base64

Hi,
I'd like to see base64 support added.

I'm currently using the library with Webpack and url-loader that inlines small filesize assets in base64 such as:

loader.add('data:image/png;base64,iVBORw0KGgoAA...5CYII=');

Currently the library isn't able to handle such case and fails at preloader/lib/util/getExtension.js

Could the library add a check if given url string is base64 encoded before looking for a file extension and just ignore the url?

I'm willing to help you implement it, if you are interested.


EDIT: made a pull request #5 that adds support

Once is-base64 merges my fix, my pull request can drop the util function isBase64in favour of is-base64 dependency.

Question: What is the correct way to handle JSON load errors?

Hi! First of all: Thanks for a good library!

In the documentation it's not clear how to handle errors, and there doesn't seem to be a

loader.on("error", function(err) {})

or at least it's not actually triggered when I try to load an invalid .json file. The error I fail to catch is

Uncaught DOMException: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'json'). at initialize._parseContent

Any suggestions?
Thanks again!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.