PxLoader is a simple JavasScript library for creating preloaders and resource downloaders for HTML5 apps.

Various plugin improvements:

• Enable setting responseType for PxLoaderData's internal XHR to allow requests for data other than plain-text (e.g. Blob data)
• Fixed PxLoaderData triggering load handler with partial data for large requests
• Release HTTP connections used by PxLoaderAudio and PxLoaderVideo after loading is completed, closes #53
• Normalized plugin APIs: replaced origin parameter used by PxLoaderAudio, PxLoaderImage and PxLoaderVideo with options hash for all plugins
• Refactored PxLoaderAudio, PxLoaderImage and PxLoaderVideo to reduce code duplication

The way exports are defined in PxLoader are incompatible with CommonJS. The PxLoader script becomes un-scoped from the window, so exporting to this is useless.

CommonJS support can be added with this line: if(module && module.exports) module.exports = PxLoader;

This code used to work:

pxImage = new PxLoaderImage(src);

It now throws an exception as of version 1.1.1:

PxLoaderImage.js:24 Uncaught TypeError: Cannot read property 'origin' of undefined

A workaround is to pass in an empty options object:

pxImage = new PxLoaderImage(src, undefined, undefined, {});

For some reason, in IE, after pre loading an animated gif and placing it on the page, the animation is on the last frame (for non-looping gifs). Examlpe of issue: http://jsfiddle.net/xJveS/4/

I have to load a lot of videos. PXLoader could help me do that. For now, video continues to load but the addCompletionListener() function is already running. While reading, I realized that this is the browser that managed if the video could be played. But I 'd like the video is fully charged for not having buffering after the loader.

Is it possible to force the full load media ? Thank you

Hi!

I really like PxLoader and I use it on every project I do. But I would like to install the library with NPM instead of Bower. Is it possible to do this ? :)

I'm adding this library to the bower registry under my user/repo, I'll gladly remove it once this has been merged and we can add it again under the Pixel Lab account.

fixes #30

Even tough there seems to be some work done for providing AMD compatibility, there are some inconsistencies that may still fail.

For example, I can have:

define [
  'pxloader'
  'pxloaderimage'
  'pxloadersound',
  'pxloadervideo'
], ( pxloader, pxloadersound, pxloaderimage,  pxloadervideo)->
    # code here...

Which may fail, since PxLoaderimage, PxLoaderSound and PxLoaderVideo will try to add some methods on PxLoader prototype through it's global definition.

PxLoader.prototype.addVideo = function(url, tags, priority) {
PxLoader.prototype.addSound = function(id, url, tags, priority) {
PxLoader.prototype.addImage = function(url, tags, priority) {

As AMD do not load files orderly, the sound, image and video plugins may finish loading first, specially because they are much smaller. And every time it happens, an error will be raised.

Uncaught ReferenceError: PxLoader is not defined 

In order to fix this, this raw prototype calls should be made as a AMD require as well in case define and amd.define is present, so the PxLoader reference will never be undefined.

The documentation shows callbacks supplied to addCompletionListener get called with an event parameter, but it appears they don't. It would actually be useful if they did.

I have the following:

    loader = new PxLoader();

    //title page
    for(var i=0; i<titlePageImages.length; i++)
    {
        pxImage = new PxLoaderImage(titlePageImages[i], "titlePage");
        pxImage.imageNumber = i + 1;
        loader.add(pxImage);

    }

    loader.addProgressListener(function(e) { 
        console.log("titlePage: " + e.completedCount + ' / ' + e.totalCount); 

    }, "titlePage");

    loader.addCompletionListener(function(e) { 
        console.log('Title Page Loaded'); 
    }, "titlePage");

    //main
    for(i=0; i<mainImages.length; i++)
    {
        pxImage = new PxLoaderImage(mainImages[i], "main");
        pxImage.imageNumber = i + 1;
        loader.add(pxImage);


    }

    loader.addProgressListener(function(e) { 
        console.log("main: " + e.completedCount + ' / ' + e.totalCount); 

    }, "main");


    loader.addCompletionListener(function(e) { 
        console.log('Main Assets Loaded'); 
    }, "main");

    loader.start(["titlePage", "main"]);

And I am getting this output in the console:

titlePage: 1 / 7
titlePage: 2 / 7
titlePage: 3 / 7
titlePage: 4 / 7
main: 1 / 17
main: 2 / 17
main: 3 / 17
main: 4 / 17
main: 5 / 17
titlePage: 5 / 7
main: 6 / 17
main: 7 / 17
main: 8 / 17
main: 9 / 17
main: 10 / 17
main: 11 / 17
main: 12 / 17
main: 13 / 17
main: 14 / 17
main: 15 / 17
titlePage: 6 / 7
main: 16 / 17
titlePage: 7 / 7
Title Page Loaded
main: 17 / 17
Main Assets Loaded

As you can see the elements tagged with "main" start downloading before the "titlePage" elements have completed.

PxLoaderImage.js is causing an error due to these lines of code:

if (options.origin) {
   img.crossOrigin = options.origin;
}

This is how I'm defining the loader:

loader = new PxLoader();
loader.add(new PxLoaderImage('images/arrow-bottom.jpg'));

A user reported this and then closed the topic, saying he solved it by "passing in all the args", but he didn't post his code solution. I don't know what arguments the loader needs. Help?

And since I have the topic open, one more question: when you say PxLoaderSound.js "works with SoundManager 2", does that mean I need to download that API? What order should I load it in (before or after the px files)?

Hi, have been using this library for years - thanks for the efforts on this. I've been mulling over whether it's possible for a plugin to handle asynchronous/promise operations? A couple of use cases:

• ~~I'm pulling data asynchronously from a remote api, I want pxloader to wait for the data to come in~~. I just saw that there is a PxLoaderData plugin for this use case.
• I'm running internal data handling logic that involves the use of a promise. I want pxloader to wait for the promise to resolve.

I took a quick look at some of the existing plugins but didn't have time to dig into them. I imagine others must have this same use case in their apps. So my question at this point is, what is the best approach here: write a custom plugin that ties all of this into pxloader or handle these types of async/promise operations outside of pxloader?

If it's the latter, the issue is then how to seamlessly integrate into pxloader's progress/complete logic and handlers?

Thanks in advance for any guidance/info on this.

Starting with v1.1.0 of PxLoader, I am now getting the following error when including it in my code.

require.js:168 Uncaught Error: Script error for "pxloader", needed by: app/Sounds, utils/resizer

Neither of the scripts listed use PxLoader in anyway, so I am a little confused by the error.

I have a path set to point to pxloader's folder in my requirejs config.

paths: { jquery: '../bower_components/jquery/dist/jquery.min', greensock: '../bower_components/greensock/src/minified', pxloader: '../bower_components/PxLoader/dist' },

And in the file that produces the error....

if (typeof define === 'function' && define.amd) { define( [ 'jquery', 'pxloader/pxloader-all' ], function () {...

PxLoader 1.0.2 and backwards work ok. This error is new to 1.1.0.

Anyone suggestions of how to resolve it would be appreciated.

Not sure if this has been addressed already but when I gulp pxloader.js with babel .pipe($.babel()) it returns a couple "PxLoader is not defined" errors.

hello! Great plugin, have been using the same for couple of my websites.

Our client has a requirement that can we have the plugin output the numbers in "addProgressListener " in a smooth transition For example - 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 ... instead of 10, 12, 15, 20.

Not sure if its possible with adding a variable and using setTimeout,etc. But that would be too complicated.

Thanks.