PreloadJS in CreateJS is not working

Question

I am trying to learn preloading of images using PreloadJS.

This is what I have:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script src="easeljs-0.6.0.min.js"></script>
    <script src="preloadjs-0.3.0.min.js"></script>
    <script src="soundjs-0.4.0.min.js"></script>    
    <script>
        var stage, output, queue;
        function handleComplete() {
            var backgroundImage=new createjs.Bitmap("myImg");
            stage.addChild(backgroundImage);
            stage.update();
        }
        function init() {
            stage = new createjs.Stage("demoCanvas");
            queue = new createjs.LoadQueue();
            queue.installPlugin(createjs.Sound);
            queue.addEventListener("complete", handleComplete);
            queue.loadFile({id:"myImg", src:"Background.png"});
        }
    </script>
</head>
<body onLoad="init();">
    <canvas id="demoCanvas" width="1300" height="600">
        Your browser does not support canvas
    </canvas>
</body>
</html>

When I load the page, I get this error:

Access is denied: preloadjs-0.3.0.min.js, line 50 character 333

I traced the Call Stack and found out the error is generated from the following line:

queue.loadFile({id:"myImg", src:"Background.png"});

Can you tell me where have I gone wrong?

Do you mean pre-loading the images so the page does not display at all until the images are ready to be displayed? — orb, Apr 14 '13 at 03:39
Try using absolute path as **src**, like that: `http://localhost/background.png`. — Ikrom, Apr 14 '13 at 07:02
I am developing an HTML5/JavaScript game. I have a lot of images to load. I am trying to use PreloadJS for loading those images. :-) — Sachin Joseph, Apr 14 '13 at 16:59

score 4 · Accepted Answer · answered Apr 15 '13 at 01:32

The path type (absolute/relative) shouldn't matter, however where you are loading it from might.

By default, PreloadJS will try and load content using XHR (XMLHttpRequests), which work only when loading on a server (file:// won't work, you should use localhost instead), and from the same domain. You can try passing false as an argument to LoadQueue to have it load the image using tags, which gets around most of those errors.


queue = new createjs.LoadQueue(false);

The errors you usually get from XHR loads are cross-origin errors though, not "Access is denied". If you are loading from your filesystem, make sure the file isn't read only, or have some sort of protection.

Here's a direct link to the class on createjs website - http://createjs.com/docs/preloadjs/classes/LoadQueue.html — Meetai.com, Jun 17 '15 at 00:39

PreloadJS in CreateJS is not working

1 Answers1