1

我想paperjs在按下按钮打开动画后加载，但如果在页面加载后加载纸张，paperscript 似乎不起作用。

如果您注释掉setTimeout并取消注释，direct $.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。有人知道这里发生了什么吗？

4

3 回答 3

3

我想我也想出了一个解决方法 -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>

这会导致 paperscript 扫描所有的 paperscript。我在https://github.com/paperjs/paper.js/blob/master/src/core/PaperScript.js#L270在 github 存储库中搜索“paperscript”时找到了它。虽然它仍然没有解释为什么动态加载时纸张不会自己执行 load() 。

编辑- 我明白出了什么问题。它与https://github.com/jquery/jquery/blob/master/src/core.js#L768有关，因为 paperjs 不检查窗口加载事件是否已经触发 ie document.readyState === "complete"。我向 paperjs 提交了一个拉取请求https://github.com/paperjs/paper.js/pull/156

于 2013-01-01T21:20:45.900 回答
0

将您的 paperscript 代码移动到外部文件（即 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");
    } )
}
于 2013-01-01T19:59:42.700 回答
0

我认为通过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');
...
于 2013-01-01T12:37:11.980 回答