And*_*ewH 0 html javascript jquery loading
我曾尝试搜索类似的问题，但无法找到我的代码在 jfiddle 中运行但在浏览器中不起作用的原因。我还尝试将我的代码从 jfiddle 复制到另一个 fiddle 项目，但该代码在新项目中不起作用。你可以在这里找到我的项目。我正在制作一个交互式食物游戏，其中有人选择食物，例如橡子南瓜，然后用户可以拖动该图像。
我的第一次尝试是在头部粘贴代码。
<script language="JavaScript">
code
</script>
我需要一个页面加载事件吗？javascript 需要放在一个函数中吗？我是否使用了 jfiddle 框架中没有在我需要调用的本地主机上使用的东西？
下面是我在没有额外食物选项的情况下使用的代码
var stage, layer;
var sources = {
plate: 'http://www.healncure.com/wp-content/uploads/2014/03/plate1.jpg',
acornsquash: 'http://www.healncure.com/wp-content/uploads/2014/03/acorn-squash.png',
};
loadImages(sources, initStage);
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for (var src in sources) {
numImages++;
}
for (var src in sources) {
images[src] = new Image();
images[src].onload = function () {
if (++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
function initStage(images) {
stage = new Kinetic.Stage({
container: 'container',
width: 936,
height: 550
});
layer = new Kinetic.Layer();
stage.add(layer);
// plate
var plateImg = new Kinetic.Image({
image: images.plate,
x: 218,
y: 20,
width: 503,
hei4ht: 502,
draggable: false,
visible: true
});
layer.add(plateImg);
// acornsquash
var acornsquashImg = new Kinetic.Image({
id: "acornsquash",
image: images.acornsquash,
x: 50,
y: 20,
width: 134,
height: 114,
draggable: true,
stroke: 'orange',
strokeWidth: 5,
strokeEnabled: false,
visible: false
});
layer.add(acornsquashImg);
layer.draw();
$(".food").click(function () {
var node = stage.find("#" + $(this).attr("id"));
node.show();
layer.draw();
console.log($(this).attr("id"));
});
document.getElementById('hide').addEventListener('click', function () {
acornsquashImg.hide();
layer.draw();
}, false);
}
通常的原因是，你把你的代码上面的元素，它在运行，并使用不延迟代码onload或“准备”的事件。的jsfiddle默认的是把你的JavaScript在onload处理程序，延迟，直到非常在页面加载过程中下旬。
从根本上说，在您的代码可以对页面上的元素执行某些操作之前，该元素必须存在。为了让它存在，浏览器必须已经为它处理了 HTML。所以这失败了：
<html>
<head>
<script>
// FAILS
document.getElementById("foo").style.color = "green";
</script>
</head>
<body>
<div id="foo">This is foo</div>
</body>
</html>
但这有效：
<html>
<head>
</head>
<body>
<div id="foo">This is foo</div>
<script>
// Works
document.getElementById("foo").style.color = "green";
</script>
</body>
</html>
我需要一个页面加载事件吗？
几乎可以肯定不是。
javascript 需要放在一个函数中吗？
不必要。你要做的是把script标签放在 HTML 的最后，就在结束</body>标签之前。