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

问题描述 投票:1回答:3

我想在按下按钮以打开动画后加载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。有人知道这里发生了什么吗?

javascript javascript-framework jquery-events paperjs
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()。

EDIT-我了解出了什么问题。它与https://github.com/jquery/jquery/blob/master/src/core.js#L768有关,因为paperjs不会检查是否已触发窗口加载事件,即document.readyState === "complete"。我向paperjs https://github.com/paperjs/paper.js/pull/156]提交了拉取请求


0
投票

我认为通过require.js加载起来更容易。您只需要一个require.config对象,例如main.js:


0
投票

将您的paperscript代码移动到外部文件(即pstest.js),然后将lateLoad修改为:

© www.soinside.com 2019 - 2024. All rights reserved.