Dynamically loading a script changes its behaviour

Question

I wanted paperjs to load after a button is pressed to turn on animations but it seems the paperscript doesn't work if paper is loaded after page load.

If you comment out the setTimeout and uncomment the direct $.getScript - paperjs will fire the alert('hi'). I don't get it.

<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            $(document).ready(function () {
                var paperUrl = 'http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js';
                $("#jq").text("jQuery is now loaded.")
                var lateLoad = function() {
                    $.getScript(paperUrl, function() {
                        $("#pp").text("Paperjs is now loaded.");
                    });
                };
                //setTimeout(lateLoad, 100);
                $.getScript(paperUrl, function() {
                    $("#pp").text("Paperjs is now loaded.");
                });
            });
        </script>
    </head>
    <body>
        <script type="text/paperscript" canvas="myCanvas">
            $('body').css({"background-color": "#999"});
            alert('hi!');
        </script>
        <p id="jq">jQuery NOT loaded yet.</p>
        <p id="pp">Paperjs NOT loaded yet.</p>
    </body>
</html>

I'm using Chrome 23.0.1271.97 m on Windows 7 x64. Anybody have an idea what's going on here?

ubershmekel · Accepted Answer · 2013-07-02 15:29:16Z

3

I think I figured out a workaround as well - paper.PaperScript.load() or to elaborate:

<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            $(document).ready(function () {
                $("#jq").text("jQuery is now loaded.")
                var paperUrl = 'http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js';
                var lateLoad = function() {
                    $.getScript(paper_url, function() { 
                        $("#pp").text("Paperjs is now loaded.");
                        paper.PaperScript.load(); // <-- The fix!
                    });
                };
                setTimeout(lateLoad, 1000);
                //$.getScript(paperUrl, function() {
                //    $("#pp").text("Paperjs is now loaded.");
                //});
            });
        </script>
    </head>
    <body>
        <script type="text/paperscript" canvas="myCanvas">
            $('body').css({"background-color": "#999"});
            alert('hi!');
        </script>
        <p id="jq">jQuery NOT loaded yet.</p>
        <p id="pp">Paperjs NOT loaded yet.</p>
    </body>
</html>

That causes paperscript to scan for all the paperscripts. I found it at https://github.com/paperjs/paper.js/blob/master/src/core/PaperScript.js#L270 while googling for "paperscript" in the github repo. Though it still doesn't explain why paper doesn't do the load() on its own when dynamically loaded.

EDIT - I understand what went wrong. It's related to https://github.com/jquery/jquery/blob/master/src/core.js#L768 because paperjs doesn't check if the window loaded event had already fired i.e document.readyState === "complete". I submitted a pull request to paperjs https://github.com/paperjs/paper.js/pull/156

edited Jul 2, 2013 at 15:29

answered Jan 1, 2013 at 21:20

ubershmekel

13k10 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Christoph Over a year ago

It would be good if you would add some line breaks in getScript and especially before paper.PaperScript.load();. Because I had to search the page for ".load" to understand what you did and where ;)

ubershmekel Over a year ago

You're right, it took me quite a while to figure out as well. Fixed it now I hope. I only recently learned the node.js convention for callback indentation. What a beauty.

asgoth · Accepted Answer · 2013-01-01 12:37:11Z

0

I think it is easier to load it via require.js. All you need is a require.config object, defined in e.g. main.js:

requirejs.config({
    paths : {   
        'jquery' : "path/to/jquery"
        'paper' : "path/to/paper"
    },
    shim: {
        'jquery' : {
            exports: 'jQuery'
        },
        'paper' : {
            exports: 'paper'
        }
    }
});

You will need to load require.js with the above config via the data-main attribute:

<script data-main="scripts/main.js" src="scripts/require.js"></script>

Then you define a module (e.g. 'paperStuff') where your paper logic will be:

define(['jquery', 'paper'], function($, paper) {
   // do some cool stuff
});

When you want to load your paperStuff, you just do

var paperStuff = require('paperStuff');
...

answered Jan 1, 2013 at 12:37

asgoth

35.8k12 gold badges91 silver badges98 bronze badges

4 Comments

ubershmekel Over a year ago

Quite the complex solution for loading scripts, jquery does it very well on its own. I'm not sure this fixes anything or that I'd like another javascript dependency...

asgoth Over a year ago

Your script with alert('hi') will always be shown, since it is on global scope. You need to load it in the $.getScript() scope. Can't you store it in a separate file and load it with a 2nd getScript() call within the paperjs getScript load?

ubershmekel Over a year ago

Did you notice type="text/paperscript"? Because that causes the browser to skip it and only paperjs executes it.

asgoth Over a year ago

Ah ok. Never mind then. I don't use paperjs. Maybe if you load paperJs, it evaluates the page first before executing its loaded callback?

ic3b3rg · Accepted Answer · 2013-01-01 19:59:42Z

0

Move your paperscript code into an external file (i.e. pstest.js) and modify your lateLoad to:

var lateLoad = function() {
    $.getScript('http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js',
    function() {
      $("#pp").text("Paperjs is now loaded.");
      $.getScript("pstest.js");
    } )
}

answered Jan 1, 2013 at 19:59

ic3b3rg

15k4 gold badges33 silver badges55 bronze badges

Collectives™ on Stack Overflow

Dynamically loading a script changes its behaviour

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related