我想在按下按钮以打开动画后加载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。有人知道这里发生了什么吗?
[我想我也想出了解决方法-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]提交了拉取请求
我认为通过require.js加载起来更容易。您只需要一个require.config
对象,例如main.js:
将您的paperscript代码移动到外部文件(即pstest.js),然后将lateLoad修改为: