javascript - Javascript 中的 new Image() 问题

Question

编码：

function CreateAndAnimateEnemyImg() {
  var enemy = new Image();
  enemy.src = 'enemy.jpg';
  enemy.class = 'Enemy';
  enemy.width = '30px';
  enemy.height = '30px';
  document.body.appendChild(enemy);
  enemy.onload = function () {
    alert('2. Image has fully loaded.');
    $('.Enemy').animate({ 'right': '+=20px' });
  }
}
$("#Start").click(function () {
  CreateAndAnimateEnemyImg();
});

奇怪的行为是发出警报但没有显示图像，动画也没有工作。请问有什么帮助吗？

Answer 1

更改您的代码：

enemy.className = 'Enemy';
enemy.width = '30'; // no px needed
enemy.height = '30';

http://jsfiddle.net/UqcqN/

您有两个错误：如果您设置width属性，则不必提供单位。你应该设置className属性而不是class.

也建议设置src在onloadhandler 之后。

Answer 2

你必须在enemy.src = 'enemy.jpg';你定义之后：enemy.onload.

Answer 3

我认为没有必要给出字符串类型的“px”；转发此http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_height

这是完整的演示小提琴

function CreateAndAnimateEnemyImg() {
  var enemy = new Image();
  enemy.src = 'http://media.steampowered.com/apps/440/icons/icon_dueling_large.14fd9f2da0f24b2dfaac37d1600c821ddb6d3456.png';
  enemy.class = 'Enemy';
  enemy.width = '130';
  enemy.height = '130';
  document.body.appendChild(enemy);
  enemy.onload = function () {
    alert('2. Image has fully loaded.');
      $('.Enemy').html(enemy);
      console.log(enemy);
    $('.Enemy').animate({ 'right': '+=20px' });
  }
}
$("#Start").click(function () {
  CreateAndAnimateEnemyImg();
});