thinkpixellab / pxloader Goto Github PK
View Code? Open in Web Editor NEWPxLoader is a simple JavasScript library for creating preloaders and resource downloaders for HTML5 apps.
Home Page: http://thinkpixellab.com/pxloader
PxLoader is a simple JavasScript library for creating preloaders and resource downloaders for HTML5 apps.
Home Page: http://thinkpixellab.com/pxloader
PxLoader is a Javascript library that helps you download images, sound files or anything else you need before you take a specific action on your site (like showing a user interface or starting a game). You can use it to create a preloader for HTML5 games and websites. Details and examples: http://thinkpixellab.com/pxloader/ The MIT License Copyright (c) 2012 Pixel Lab Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
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!
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.
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/
var self = this; loader = null;
should be :
var self = this, loader = null;
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.
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,
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...)
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.
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.
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?
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
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
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?
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.
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
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.
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
.
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.
Guys the website is down and I have no access to docs...
(this will be specially useful for localhost: testing and also for websites having small-images/less-images)
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, {});
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.
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';
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 ? :)
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.
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)?
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;
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.
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 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.
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)
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.
Seems like CORS for PxLoaderVideo.js references the img object. Seems to me like it should be referencing the vid object instead.
PxLoader works on IE8 emulated in IE9, but not vanilla IE8.
"Number expected
PxLoader.js
Line: 125
Char: 9"
... unless I am using the library incorrectly.
When I made the substitution, all was working as expected.
Details:
File: PxLoader.js
Line: 310
Please publish to npm
Thanks
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.