Question

我正在尝试初始化一个Image()个对象数组，每个对象都有一个不同的x位置。但是，数组中的所有对象似乎最终都具有相同的x位置。我试图寻找一个解决方案，它似乎与'封闭'有关，但我不知道如何解决它。

这是我的代码：

function initPieces(){
  for (var i = 0; i<8; i++) {
    var piece = new Image();

    piece.x = 5 + i*50;
    piece.y = 5;

    piece.src = "images/piece.png";

    piecesArray.push(piece);

    alert(i + ", " + piecesArray[i].x);
  }
}

我甚至尝试通过手动声明piecesArray并为8个部分中的每一个手动设置new Image()位置来初始化x而没有循环。但它给了我同样的问题。

非常感谢任何寻求解决方案的帮助。

Answer 1

我无法找到HTMLImageElement.x和HTMLImageElement.y属性的明确引用（因为that's what you are creating带有new Image()），但MDN表示他们是只读的和实验性的，不能在生产代码中使用。

它们确实是只读的：在快速测试中，我确实可以设置它们，但之后读取值只会产生0。

如果要在插入DOM后在页面中移动元素，请使用标准技术，例如操作piece.style.top。

Answer 2

您尚未将这些图片添加到DOM中，因此x，y，offsetLeft和offsetTop属性没有上下文（默认为zer0）。

在操作图像之前先将图像添加到DOM，或者使用不同的属性：

var piecesArray = [];
function initPieces(){
  for (var i = 0; i<8; i++) {
    var piece = new Image();

    piece.tempX = (i*50 + 5); // temporary place holder for X
    piece.y= 5; // this will not work; allows set, but does not change value

    piece.src = "images/piece.png";

    piecesArray.push(piece);

      alert(i + ": " + piecesArray[i].tempX);
  }
}
initPieces();

在此处查看演示文件：http://jsfiddle.net/87xff3fy/1/

Image.x的参考：http://help.dottoro.com/ljkvjhbq.php（不要使用它！使用style或临时变量将style.top和style.left设置为渲染时间）

Javascript初始化图像数组

2 个答案: