createjs / preloadjs Goto Github PK

Hi, there are some JSDOC in the queueloader src that prevents webstorm from inspecting propertly, on line 1049:

/**
     * REMOVED.  Use createjs.proxy instead
     * @method proxy
     * @param {Function} method The function to call
     * @param {Object} scope The scope to call the method name on
     * @static
     * @private
     * @deprecated In favour of the createjs.proxy method (see LoadQueue source).
     */

    createjs.LoadQueue = LoadQueue;

The jsoc is applied to the LoadQueue references and tit then thinks it is private.

I get weir exprerience on Dolphin and MIUI on android 2.2 and 2.3. When complete callback is executed, I can't retrieve any of the loaded images. No onFileLoad or onFile Error callbacks are executed.
On desktop and android 4 (native browser and Chrome mobile) all works.

What is weird that despite _numItemsLoaded is 100 (the amount of my images), the items arrays are empty:
'_numItemsLoaded' : 100,
'_loadedItemsById' :{},
'_loadedItemsBySrc' :{},

Calling the removeAll function results in a "TypeError: this.initialize is not a function"

The bad call appears in the function remove(), called with no arguments, inside that function "this.initialize" is called although the function "this.init" should be called instead.

My current workaround is adding:
createjs.LoadQueue.prototype.initialize=createjs.LoadQueue.prototype.init;
to my code to create a link to the missing function.

When listening to the onComplete event on the PreloadJS object, the event handler is called each time a file is loaded instead of when they are all loaded. This happens only when the _maxConnections property is greater than one.

I'm using preload js to load in a lot of audio files and webkit browsers are crashing.

View source on this for a simple demonstration...
http://habel.net/game/webkit_crash.html

I think it may in fact be a bug with the browsers because if you do document.createElement('audio') a bunch of times and cache the elements in an array, the crash will also occur. Was hoping there would be some type of workaround you could suggest.

Ignore this I think it's just because there are several changes from 0.2 to 0.3 I haven't taken into account

My issue was resolved once I realised there is a getItem() function as well as a getResult()

When an AbstractLoader / PreloadJS fires the onComplete event the loaded property is not true. The loaded property seems to just stay false forever, even when the loading has completed. I can use "_loadQueue.length == 0" of course, but it doesn't seem right.

I'm using the NEXT version and preloading an array of images. I'm getting the following error 4 times in a row when the preloader is running at page load. The page does load correctly however -- any clues as to what could be causing this?

Message: 'undefined' is null or not an object
Line: 32
Char: 116
Code: 0
URI: https://xxx/assets/js/libs/preloadjs-0.3.0.min.js"

First of all: thanks for the great work! Something like this was really missing.

Consider the following code:

var manifest = [
  {id:"sound1", src:"audio/sound1.wav"},
  {id:"sound2", src:"audio/sound2.wav"},
  {id:"sound3", src:"audio/sound3.wav"}
];
preload = new PreloadJS();
preload.installPlugin(SoundJS);
preload.loadManifest(manifest);

None of the WAV files will be loaded. If I rename them to mp3 or ogg, everything seems to work fine.

Hi,

I'm getting an strange error in IE8, when I load my page I start a queue loading and after finish I get a result by Id.

But sometime I can get correct value and some times not.

For example I'm loading an image:

queue = new createjs.LoadQueue()
mainfest = []
mainfest.push({id:"imagebackground", src:data['pathBackground']})
queue.onComplete = handleComplete
queue.loadManifest(mainfest)

function handleComplete(e){
queue.getResult('imagebackground')
}

sometimes this code return me a correct image, otherwise return me a document object.

Anyone know about this issue and can help me?

Thanks

Hi,
I am trying to figure out a way to know when the file is completely loaded. Is their no method in easeljs to learn when then the file is completely loaded using PreLoadJS ???

ThankYou in advance

Hello,

I started implementation of a SoundJS plugin for the WebAudio API, which requires a preload of an arraybuffer as responseType for an XMLHttpRequest. For now, the Plugin itself loads the files via XHR, but in my opinion PreloadJS is the right place where it should be done.

I wonder if it would make sense to add a responseType='arraybuffer' and a type for it here?
https://github.com/CreateJS/PreloadJS/blob/master/src/preloadjs/PreloadJS.js#L744

PS: Does it make sense to implement it here in PreloadJS? How can I reach through the stuff later to the WebAudioPlugin in SoundJS? SoundJS itself has no similar handling in its concept by now (as far as I could see).

The only thing that is related to preloading here doesn't make sense at all - as the Plugin itself should handle the data - and not getting an Audio instance, because the Audio instance is not available everywhere and platform (plugin) dependend.

See in SoundJS:

    SoundJS.getPreloadHandlers = function() {
        return {
            callback: SoundJS.proxy(SoundJS.initLoad, SoundJS),
            types: ["sound"],
            extensions: ["mp3", "ogg", "wav"]
        }
    }

~Cheers, Chris

Hi,

Everything work fine on localhost. When files are uploaded to a server, doesn't work anymore :/
Errors occurs randomly. Files are stored here :
http://mco.lesitevideo.net/temp/easelJS2/index.html

(MacOS - Google chrome 22.0.1229.79)

Hi

I'm using PreloadJS to load resources for a game I'm developing, and noticed that it does not work in IE9, on both desktop and Windows Phone.

I am not sure what is the cause at the moment, but in short the loading code is as follows:

...
var preload = new PreloadJS();
var assets = [];

for (var i = 0, resources = config.PRELOAD_RESOURCES.images, length = resources.length; i < length; i++) {
assets.push(config.APP_IMG_RESOURCE_URL + resources[i]);
}

for (var i = 0, resources = config.PRELOAD_RESOURCES.sfx, length = resources.length; i < length; i++) {
assets.push(config.APP_SFX_RESOURCE_URL + resources[i]);
}

preload.loadManifest(assets);
...

where config.PRELOAD_RESOURCES.images is defined as:

//Excerpt
config.PRELOAD_RESOURCES = {
images: [
"a.png",
"b.png",
... //Excluded for brevity
],
sfx: [
"a.mp3",
"b.mp3"
... //Excluded for brevity
]
};

To add, in the affected browsers (IE), I do not see any network requests going out at all.

Any help will be appreciated. Thanks!

EDIT:

I also noticed IE throwing the following error:

SCRIPT438: Object doesn't support property or method 'overrideMimeType'
preloadjs-0.1.0.min.js, line 37 character 17

Am getting: "SCRIPT5007: Unable to get value of the property 'src' : object is null or undefined preloadjs-0.3.0.min.js, line 29 character 276

Here's the loader code I'm using:

I am using SoundJS combined with PreloadJS - both compiled from the latest sources - to load a list of soundtracks for a browser-based media player.

The current PreloadJS documentation states that you can define a file as an object with "src", "id", "type" and "data" property. It also says that the value of the data property can be "an arbitrary data object" (see http://www.createjs.com/Docs/PreloadJS/PreloadJS.html#method_loadFile). However if I set the value of the data property to something else than a positive numerical value - for example an object with additional meta data like a title - the SoundInstance created with SoundJS.play always has "playFailed" as playState and loaded is set to "false".

For example that fails:

<!DOCTYPE html>
<html>
    <head>
        <title>Audio Player</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="//code.createjs.com/preloadjs-0.2.0.min.js"></script>
        <script src="//code.createjs.com/soundjs-0.3.0.min.js"></script>
        <script>
            $(window).load(function() {
                var manifest = [
                    {
                        "id"  : "track-1",
                        "src" : "some-audio-file.ogg",
                        "data": { "title": "Ttile" }
                    }
                ];

                var loader = new createjs.PreloadJS();
                loader.installPlugin(createjs.SoundJS);

                loader.onComplete = function() {
                    createjs.SoundJS.play("track-1");
                };

                loader.loadManifest(manifest, true);
            });
        </script>
    </head>
    <body></body>
</html>

If set the data property to a positive integer or float it works...

This issue also occurs with version 2.0.0.

Looks like sound loading of the NEXT version is extremely slow on the web server.
Here is a test case which loads 10 MP3s.

http://geoquake.jp/experimental/PreloadJSTest/test_prev.html
http://geoquake.jp/experimental/PreloadJSTest/test_next.html

archive: http://geoquake.jp/experimental/PreloadJSTest/test.zip

on the URLs above

test_prev.html:
Chrome 24(Windows 8): 293ms
IE10(Windows 8): 39ms
Safari(Mac): 64ms

text_next.html:
Chrome 24(Windows 8): 1078ms
IE10(Windows 8): 4339 ms
Safari(Mac): 1564ms

on the local Apache

test_prev.html:
Chrome 24(Windows 8): 90ms
IE10(Windows 8): 48ms
Safari(Mac): 77ms

text_next.html:
Chrome 24(Windows 8): 886ms
IE10(Windows 8): 4089 ms
Safari(Mac): 198ms

Cheers,
Katsuomi Kobayashi

PreloadJS cannot load file name with parameter, such as "image.png?20121006".
When I first look at the code, this seems to be implemented, but it doesn't.
string.lastIndexOf() can not use with RegExp object.

This only happens in Firefox. Sometimes it doesn't, cause is unclear.

 p._loadItem = function(loader) {
loader.addEventListener("progress", createjs.proxy(this._handleProgress, this));
loader.addEventListener("complete", createjs.proxy(this._handleFileComplete, this));
loader.addEventListener("error", createjs.proxy(this._handleFileError, this));
this._currentLoads.push(loader);
this._sendFileStart(loader.getItem());
loader.load()
}; 

This is where this error happens. the call stack is

_loadItem()
_loadNext()
setPaused(value=false)
loadManifest()

http://community.createjs.com/discussions/preloadjs/20-cant-seem-to-preload-on-safari-mobile-and-pc

When i call Queue.removeAll() i get the following error:
Uncaught TypeError: Object [object Object] has no method 'initialize'

In minified version: this.initialize(this.useXHR) (line 241 using Chrome's pretty print)

When accessing the 'result' property of the event object passed to the onComplete event handler, its value is always undefined on all browsers except for Internet Explorer. This is due to a mis-assignation in PreloadJS.js on line 558.

data = parser.parseFromString(data, "text/xml");

should be

resultData = parser.parseFromString(data, "text/xml");

I am develop a desktop app based on node-webkit, then I using preloadjs to load some local json file, but it's fail.
I checked source code of preloadjs, I found the function '_checkError' where in XHRLoader returns error(false) when xhr.status=0.
I guess it's a little issue.

overrideMimeType is not supported in IE9.
my (lame) "workaround" is to comment lines 196-198 in XHRLoader.js

there is a video file in my load queue, which probably doesn't help,
as I don't see any support for video files mentionned in your documentation.

I'm receiving the following errors intermittently in Safari (and Mobile Safari) for images that have been successfully loaded in a previous session.

XMLHttpRequest cannot load http://s3-eu-west- 1.amazonaws.com/assets.unwalked.com/photographs/worthing_littlehampton_ford/outfall_large.jpg?1369324272. Origin http://unwalked.dev is not allowed by Access-Control-Allow-Origin.

My application loads images from S3. I have a CORS policy file there which I'm almost certain isn't the problem. I have tried with explicit origin and this makes no difference:

<?xml version="1.0" encoding="UTF-8"?>

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">

    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>

</CORSConfiguration>

The first time I load the app (with an empty cache), all images are downloaded successfully. However, if I refresh the page (the images having been cached), I receive the above error for any images that were loaded in the previous session. Any images not previously loaded fail to load. Note that in this case, the queue's error callback is called with an undefined event.error parameter.

This problem doesn't seem to effect FFox, Chrome or IE(9/10).

I have opened a Stack Overflow question here.

I cannot see any result in there but I can see website's demo. I use chrome and open and example under the PreloadJS root folder. It doesn't see any effect

I had a nasty situation where I was inadvertently passing undefined into remove(). The side effect of this was that my queue reinitialised, triggering the complete handler, and causing me to look for the problem in the wrong place.

The problem comes down to the fact that calling remove() with a null or undefined value has the same effect as calling it with no argument. I think the best course of action would be to remove this functionality from remove() and leave it to the explicit removeAll()

I found the issue that "ext" parameter of an argument to loadManifest() can't be specified freely.
For example, a user requests a image using preload.js to server script returning jpg image "http://example.com?a=jpg&id=111". In this instance, preload.js can't know file extension correctly as following,

var loader = new createjs.LoadQueue(false);
loader.loadManifest([{src: "http://example.com?a=jpg&id=111", id:"foo", ext:"jpg"}]);
// But this case, preload.js recognizes that extension is ".com"!

So my workaround is now: fixing p._createLoadItem of /src/preloadjs/LoadQueue.js like a following

// before bug fix
 if (match != null) { item.ext = match[5]; }

// after bug fix
if (match != null && !item.ext) { item.ext = match[5]; }

PreloadJS throws errors when attempting to run in IE 7/8.
Original post

latest version of preloadJs (0.3.0 aka NEXT) not generating progress event.
To repro, run the 'PreloadQueue' demo - note progress event isn't being dispatched.

(confirmed in chrome and ff - latest versions)

Test it with this html-page and some picture you call a "an-image.jpg":

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <script src="js/preloadjs-NEXT.min.js"></script>
        <script>
            var test = new createjs.LoadQueue();
            test.loadFile('an-image.jpg');
            test.addEventListener('fileload', function() {
                alert('load');
            });
            test.addEventListener('complete', function() { 
                alert('complete');
            });
        </script>
    </body>
</html>

When you open that page the first time in IE7, the alerts in the fileload and complete listeners will fire. When you refreh the page, the events won't fire anymore. Will you open a new tab and load the page, everything works fine - until the reload in the same tab...

Would be handy to have a non-minified but compiled version of the preloadjs classes available. Already minifying everything my end and would be helpful for debugging to have a readable version of the codebase in a single file.

Hi,

I have get a code with PreloadJS to integrate in a website. This code run on my laptop (in localhost), in firefox and google chrome. But, when I upload it on remote server, I have a probleme with PreloadJS only on Firefox.

"ReferenceError: PreloadJS is not defined"

External javascript file are loaded. I use PreloadJS 0.1-min version. I have try to add namespace createjs, but it doesnt work (and bug too on chrome).

This probleme is online in next website : http://memofragrances.com/ad/index.php
Do you understand origin of my problem ?

Regards,
Vincent

Getting errors every time the following function in LoadQueue runs due to its event parameter being undefined. Although the images I'm loading still load successfully and it would be a trivial matter to add a check to see if event is defined, this means I cannot monitor load progress in IE9/IE10.

It seems IE9 doesn't support progress events, but IE10 does. This should be added to the documentation.

p._handleProgress = function (event) {

    if (event.loaded > 0 && event.total == 0) {
      return; // Sometimes we get no "total", so just ignore the progress event.
    }
    this._sendProgress({loaded:event.loaded, total:event.total});
};

The error:

SCRIPT5007: Unable to get property 'loaded' of undefined or null reference

For example

var url = 'http://example.com/image_proxy?url=http%3A%2F%2Fexample.com%2Fimages%2Ftest.jpg%3F12345';
url.match(AbstractLoader.FILE_PATTERN)
=> null

Some mobile social platforms in Japan acquire the picture via a gadget server.

How about supporting video element like audio?
I'm not sure whether it's easy or not.
But I'm planning to try it for my work.
Do you think that it's possible to implement it as a plugin?
It seems sweet that this could preload only supported video using feature detection like SoundJS does.

Both events descibe their payload's progress attribute as:

The percentage that has been loaded. This will be a number between 0 and 1.

I would expect a percentage to be in the range between 0 and 100. 0-1 is more useful, but the docs should maybe refer to it as a ratio or proportion.

I get this error trying to use PreloadJS with IE7 or IE8:

SCRIPT5007: Unable to get property 'addEventListener' of undefined or null reference
preloadjs-0.3.0.min.js, line 30 character 239

Title sums it all, so there is no way preload.js can load local asset from harddrive and show its progress.Since i can not run the demo work files locally from hard disk.What is the library i can use for that to fetch local assets.

Hi i wanted to try the new version of preloadJS but i got this error.

[15:28:55,551] TypeError: this.init is not a function @ http://code.createjs.com/preloadjs-0.3.0.min.js:19

the code source :
{

When using setMaxConnections with more than 1, it sometimes prevent the the loading queue to finish completely. It stops on the last item and it occurs when the items is received in a different order than the order in the queue, due to the max-connections and the browsers own limitation that might delay the request. Not sure what is causing this, but it's solved by manually setting maintainScriptOrder to false. In my case it's just json-files so I don't need maintainScriptOrder to be true. Thinking it can be good to know for others that experience problems getting the loadingComplete event occasionally. The loading should at least warn or something if setMaxConnections is used and if this is an expected behaviour when maintainScriptOrder is true. Or a more robust check for items still in the queue, so that _loadNext and _checkScriptLoadOrder is fired correctly when items is received in different order than loaded.

var queue = new createjs.LoadQueue(true);
queue.setMaxConnections(6);
queue.maintainScriptOrder = false;

I'm using LoadQueue to load an array of images and then add them to dom when load completes. This works fine on all browsers except mobile chome (on iPhone). In mobile chome, the images' natural width will trace out to be 0 and I'm not sure why. Works fine on mobile safari.

var queue = new createjs.LoadQueue(true);
queue.loadManifest(imgArray, false);
queue.addEventListener("complete", handleComplete);

function handleComplete () {
    for (var i = 0; i < imgArray.length; i++) {
        var img = document.createElement('img');
        img.setAttribute('src', imgArray[i]);
        img.setAttribute('alt', site.data.albums[index].pictures[i].id);
    }
}

I deleted the part where I add img to the dom.

Just looking briefly at the code, it looks promising, though I was somewhat surprised to see that SVG is not a recognized file type. If I'm understanding correctly, it looks like this should be a pretty trivial change in PreloadJS.getType().

Hi,
redirected images does not seem to work yet with safari.

Sometimes it's the only way some image can be obtained, such as facebook profiles images:
http://graph.facebook.com/USER_ID/picture?type=large

Cheers

• Jonathan

My MP3s are hosted on AWS S3/CloudFront on a domain separate from my app's domain. This causes an error in the PreloadJS library on IE9+Win7:

http://imgur.com/dsCJy
http://imgur.com/v30Vj
http://imgur.com/ppKHt

IE9 doesn't support CORS for XHR. IE10 will.
However, IE8/9 supports CORS with XDomainRequest.

After researching, I've concluded XMLHttpRequest object needs to be replaced with XDomainRequest if the domain is different for item.url than document.location.href.

http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx

http://www.hoboes.com/Mimsy/hacks/xdomainrequests-hidden-requirements/

This is a critical bug blocking push to production.

Hi,

Would there be any interest in adding hooks which let you you also track the readiness of Vimeo iframes? They tend to disrupt the parent document as they load their respective DOMs, making sites that need a lot resources jumpy before that occurs.

With the use of html5 postmessage it should be quite doable.

If there was a willingness to require libraries such as froogaloop or the youtube api library, you could ensure a method to stay in sync with the vendor's changes.

I will probably do this on my own, but I was just wondering if it would be worth while to study your code style and try to make it an official pull request.

Thanks!

Tested in Firefox 21.0, since the 3.0.1 update and in NEXT if you load a url without an extension you get a undefined on _getTypeByExtension(a)

my temp local fix was

if (a == null) a = "";

Every item other than the xml in the mediagrid demo fail under firefox 5.0.

In the project we're using it with the error reported to console is:

[11:33:28.719] uncaught exception: [Exception... "Not enough arguments" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: http://192.168.0.96/2A2000-2and2Website/assets/js/preloadjs-0.1.0.min.js :: <TOP_LEVEL> :: line 31" data: no]

This is from the version of preloadjs generated with the flash cs6 createjs toolkit.

I'm creating a system in which a bunch of images tween across the background with different effects. I can load as many images as I want, and they all tween nicely. Now I've even made it work with videos, so it pauses until the video ends, and then it moves on to the next image or video.

The problem I'm experiencing, is that when I create a manifest of URLs to the images and then add in a video at ANY point in the manifest (first, last, middle, anything), it removes an element from the end of the manifest per mp4 file in the manifest.

As I said, the video works perfectly once it's loaded, though.

If I load in this order, image4 disappears while running loadManifest(manifest), but the other elements work:
image1.jpg
image2.jpg
video1.mp4
image3.jpg
image4.jpg

If I load in this order, video1 disappears, but the other elements work:
image1.jpg
image2.jpg
image3.jpg
image4.jpg
video1.mp4

If I load only the video, it says that no elements were loaded, and if I load the video first and then an image, only the image is loaded.

So your video-preloading works just fine, except your loading-script does not seem to accept it. Probably because it isn't one of the 'types', but you know better than I.

Pretty much everything is said in the title... The onLoadStart event is never fired inside the PreloadJS class.