thinkpixellab / pxloader Goto Github PK

... unless I am using the library incorrectly.

When I made the substitution, all was working as expected.

Details:
File: PxLoader.js
Line: 310

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;

Want to show downloading progress bar ,I'm downloading file and script from cross domain,and want to show progress of download,Here I'm download file with ajax and script file with document.write and giving src to it. But didn't succeed with ajax,although on same domain it is working,

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.

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, {});

Since you're hooking into SoundManager 2, do you assume that loader.addSound() will be called from within a soundManager.onready()? Do you require soundManager.waitForWindowLoad to be set to "true"?

I've tried various combinations (with/out waitForWindowLoad, and inside/outside onready()) and haven't been able to get the sounds to preload properly.

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)?

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.

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.

Images are not loaded in an order that I set up. progress listener outputs unpredictable sequence.

This situation is in a sample 2 http://thinkpixellab.com/pxloader/ Report Progress While Images Load.

I got this:

Image 1 Loaded
Image 100 Loaded
Image 6 Loaded
Image 5 Loaded
Image 4 Loaded
Image 3 Loaded
Image 7 Loaded
...

Is this a normal behaviour? When images are cached an order is as expected. I run on OSX 10.7.3 (Safari, Chrome, Firefox...)

(this will be specially useful for localhost: testing and also for websites having small-images/less-images)

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 ? :)

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.

PxLoader works on IE8 emulated in IE9, but not vanilla IE8.

"Number expected
PxLoader.js
Line: 125
Char: 9"

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/

Hey there. First of all, awesome library, helps alot.
Thought I let you know: I had an issue with your audio loading example on http://thinkpixellab.com/pxloader/.

It happened to me that addSound() occurs before the soundManager is ready for usage, resulting in an error.

I solved it by calling the loadSound()s and loader.start(); within the soundManager.onready-function.
addImage() can be done before soundManagers' onready though.

Hi guys,

Could you please update your addCompletionListener() to always fire last (after progress events)?

I noticed that it is pushed into your array of progress event listeners, which does not guarantee consistent event fire order.

Thank you,
David

Good afternoon,
I'm searching for a way to indicate the download time necessary to preload six bin files:

http://grvsitest.altervista.org/media/source/cartoon_html/BG_0_coordBinary.bin
http://grvsitest.altervista.org/media/source/cartoon_html/BG_0_normalBinary.bin
http://grvsitest.altervista.org/media/source/cartoon_html/BG_0_colorBinary.bin
http://grvsitest.altervista.org/media/source/surface_html/BG_0_coordBinary.bin
http://grvsitest.altervista.org/media/source/surface_html/BG_0_normalBinary.bin
http://grvsitest.altervista.org/media/source/surface_html/BG_0_colorBinary.bin

which require the largest time to load the whole web page, which has an incorporated x3d file (not in inline mode). For now, I'm using a timer setted to 75 seconds (an in excess time, considering the variable network connection speed and the emptying or less of user browser's cache), to have the necessary time to finish the web page preloading (as you can see here: http://grvsitest.altervista.org), but when the page is already visited (for which it is in the browser's cache), it requires much less time to see the object, and so it results in a not necessary delay. So, I'm searching for a way to take the real time needed each time to preload these six objects, after which will happen the hiding of the preloader and the showing of the 3D viewer. I found your PxLoader javascript, and I thought that it could be able to do that, but I would ask you how I can pass bin files to display a percentage progress of download, as on click on the header of your website's home page (http://thinkpixellab.com/pxloader/). Thanks a lot for your help, and I hope you can give me some indications.

Regards,

Riccardo

Just need to include the build file and tag a release, much easier to use as dependency for a project than having to clone the git repo, install all the tools and run grunt.

Seems like CORS for PxLoaderVideo.js references the img object. Seems to me like it should be referencing the vid object instead.

If I preload some images, then insert html into the DOM later without using the returned image objects, will they be cached and load instantly?

Simply using PxLoader like this

var loader = new PxLoader(),
    backgroundImg = loader.addImage('assets/art/sprites/sprite-1.png');

loader.start(); 

I am getting this error. When I check the code, I see the options.origin is referenced, but these arguments don't get passed in any of the examples, in my case I wouldn't be passing in options, shouldn't you be checking to see if options is defined before the conditional if (options.origin) ?

Edit well I got around this by passing in all the args, if they are required now, might be a good idea to update the docs. Also, I'm not too sure how the PxAudioLoader is supposed to work... I don't need to play sounds, I just need to load them (I'll be playing them using my own API). When trying to load audio I get an error

Uncaught TypeError: undefined is not a function which is thrown by this line self.audio.load(); (which seems weird to me because if I log the url before that line, it's correct) perhaps I am misunderstanding what the audio loader is meant for?

Edit my bad, was using outdated version of Chromium, all fine now. Still think those args should be in the docs tho.

var self = this; loader = null;
should be :
var self = this, loader = null;

http://thinkpixellab.com/pxloader/#plugins

When we create the entry and push it inside the array of entries, we should use status instead of state because it's status that is used in the code and not state

I was getting real excited about PxLoader until I saw that the sound plugin is dependent on SoundManager2. It seems unnecessary to have SM2 as a baseline dependency for sound loading for this library, and it's making me reconsider using PxLoader for my project.

Have you considered including a simple sound loader module for basic HTML5 audio, and then a more advanced one that uses SM2 for those who want it?

It would be helpful to abort a load sequence. Even pause it. You can't stop a browser from downloading a file once its started, but you can prevent firing off any more requests.

I have no (clear) way to remove my progress and complete listeners and I have no (clear) way of stopping PxLoader from plowing through 1000 files once I get it started.

Library is great btw!

An issue that I have run into with my usage of PxLoader in my current project is that of the limit on concurrent/parallel HTTP connections imposed by particular browsers (see http://www.browserscope.org/?category=network for a list of limits per browser) causing preloading to appear to stall when attempting to load a large number of video and audio resources. This is because PxLoader makes use of the canplaythrough event to know when to count a video or audio resource as 'loaded' -- unlike with preloading an image, where the entire file is downloaded, resulting in the HTTP connection to that resource being released and enabling the next resource in the connection queue to be loaded, preloading a video or audio file will result in the browser maintaining an open HTTP connection to the resource so that buffering can continue, blocking preloading of any other resources that are waiting for a connection.

I have tried to devise a workaround for this problem for my current project (where I am attempting to preload a number of videos that will be used later on in a single page app, not necessarily immediately after preloading) and have determined that setting the src attribute of the video or audio element used by PxLoader to an empty string after the canplaythrough event is fired results in the browser releasing the HTTP connection used by the resource. This approach probably needs further testing to determine if it has any unwanted side-effects i.e. the browser discarding the previously buffered data. However, if it appears to work, would this be a welcome addition to PxLoader, @joelfillmore? Can you think of any reasons why it wouldn't be a good idea?

An alternative approach would be to load video or audio resources as Blob data, using XMLHttpRequest and then returning a local object URL (from URL.createObjectURL) that represents the resource (which is how PreloadJS works). PxLoaderData could be co-opted to do this, if we expose a means of setting the responseType of the XHR used internally by the plugin, or a new PxLoaderBlob plugin could be implemented. The downside to this is that this won't work in IE9 (if anyone still cares about that...) and that you have to wait for the entire resource to download (which is 'true' preloading, but could be lengthy if used with a large number of resources).

I'd be pleased to submit a PR in response to this, but think that it would be worth asking for some input from @joelfillmore and any other interested users first so we can decide on the best approach to tackling this issue.

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.

First I would like to say that this is a great Plugin, but I have come across an issue with PxLoader in Internet Explorer 10 on a Windows 7 machine.
The problem is that it dies silently, meaning that no error message is produced.
This problem is visible on the main website of the plugin http://thinkpixellab.com/pxloader/
I would appreciate any feedback on the issue.

Fonts load asynchronously and there is no load event at all. This always bites developers making canvas games that want custom fonts.

(Fwiw, in Mozilla, the window load event waits for fonts, but not in Webkit)

• Ideally, it uses https://github.com/Pomax/Font.js as a dependency.
• https://github.com/paulirish/font-face-detect/blob/master/isFontLoaded.js is also an option, but its less tested and robust

Please publish to npm
Thanks

The demo of 'Load Images in Groups' have an error about 'tags' property，

var line = ' Image ' + e.resource.imageNumber + 
        ' Loaded [' + e.resource.tags[0] + ']\r'; 

should be :

var line = ' Image ' + e.resource.imageNumber + 
        ' Loaded [' + e.resource.tags.all[0] + ']\r'; 

Code in http://thinkpixellab.com/pxloader/

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

Guys the website is down and I have no access to docs...

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.

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.

I kept getting these errors in Firefox 3.6.25:

uncaught exception: [Exception... "Not enough arguments" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: http://[removed]/js/pxloaderimage.js :: anonymous :: line 88" data: no]

All other browsers were working correctly: Chrome, FF10, Safari, IE9-7.

I fixed it by editing line 88 in pxloaderimage.js from:

self.img.removeEventListener(eventName, eventHandler);

to

self.img.removeEventListener(eventName, eventHandler, false);

My knowledge of Javascript isn't that good, so I have no idea of what I did is correct. But it did solve my problem. I'm also not very experienced with GitHub, so I don't know how to add this as a fix as well.

I would like to know if what I did was correct and if it fixed a bug.