Question

我想在按下一个按钮打开动画后加载paperjs但是如果在页面加载后加载纸张，则看起来稿件不起作用。

如果您注释掉setTimeout并取消注释直接$.getScript - paperjs会触发alert('hi')。我不明白。

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

我在Windows 7 x64上使用Chrome 23.0.1271.97 m。有人知道这里发生了什么吗？

Answer 1

我想我也想出了一个解决方法 - paper.PaperScript.load()或详细说明：

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

这会导致稿件扫描所有的文件。我在github repo中搜索“paperscript”时在https://github.com/paperjs/paper.js/blob/master/src/core/PaperScript.js#L270找到了它。虽然它仍然无法解释为什么纸张在动态加载时不会自行执行load（）。

编辑 - 我明白出了什么问题。它与https://github.com/jquery/jquery/blob/master/src/core.js#L768有关，因为paperjs不会检查窗口加载的事件是否已经被解雇，即document.readyState === "complete"。我向paperjs https://github.com/paperjs/paper.js/pull/156

提交了拉取请求

Answer 2

我认为通过require.js加载它会更容易。您所需要的只是一个require.config对象，在例如main.js：

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

您需要通过data-main属性

加载带有上述配置的require.js

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

然后你定义一个模块（例如'paperStuff'），你的纸质逻辑将是：

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

当你想加载paperStuff时，你只需要

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

Answer 3

将您的文档代码移动到外部文件（即pstest.js）并将lateLoad修改为：

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");
    } )
}

动态加载脚本会更改其行为

3 个答案: