Проблемы с новым Image() в Javascript

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 после onload обработчик.

Answer 2

У вас должно быть enemy.src = 'enemy.jpg'; ПОСЛЕ определения: enemy.onload.

Answer 3

Я думаю, что не нужно указывать строку типа 'px'; rtefer этого http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_height

Вот полный Demo Fiddle

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(); 
});