CODEWITHSUNDEEP
javascriptjquery
Sora
Sora

Reputation: 2551

Issue with new Image() in Javascript

The code:

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

The weird behavior is that the alert is raised but no image is shown, nor the animation is working. Any help please?

Upvotes: 2

Views: 68

Answers (3)

RONE
RONE

Reputation: 5485

i think no need for giving string kind of 'px'; rtefer this http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_height

here is the complete 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();
});

Upvotes: 0

dfsq
dfsq

Reputation: 193261

Change your code:

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

http://jsfiddle.net/UqcqN/

You have two mistakes: if you set width property you don't have to provide units. And you should set className property instead of class.

It is also recommended to set src after onload handler.

Upvotes: 3

Grallen
Grallen

Reputation: 1670

You have to enemy.src = 'enemy.jpg'; AFTER you define: enemy.onload.

Upvotes: 0

Related Questions