Почему мой образ не загружается?

Question

В http://blajeny.com у меня есть:

jQuery('body').click(function(event_object) 
    { 
    spark(event_object.pageX, event_object.pageY); 
    }); 

function spark(x, y) 
    { 
    console.log('Spark called.'); 
    var image_object = new Image(); 
    image_object.onLoad = function() 
     { 
     image_object.style.position = 'absolute'; 
     image_object.style.zIndex = 1; 
     image_object.style.top = y; 
     image_object.style.left = x; 
     } 
    image_object.src = '/img/spark.png'; 
    } 

планируемый эффект, на данном этапе, чтобы загрузить изображение в X и Y, где пользователь нажал. (Я хочу делать и другие вещи, например, анимировать его, но прямо сейчас я пытаюсь показать изображение, где пользователь нажал.)

Консоль javaScript показывает, что обработчик вызывается, однако Я не вижу того, чего ожидаю, туманного синего круга, расположенного ниже и справа от точки, где была нажата мышь.

Что можно/нужно делать по-другому, чтобы он загружал свежее изображение ниже и справа от щелчков координат?

Спасибо,

Answer 1

Насколько я знаю, onLoad должно быть onload

var image_object = document.createElement('img'); 
image_object.onload = function() { // Note the small onload 
    // your code 
} 

// Also, append the image_object to DOM 
document.body.appendChild(image_object); 

Answer 2

Вы никогда не добавлять изображения к DOM, поэтому вы не можете увидеть его.

Вы можете сделать

document.body.appendChild(image_object); 

Вы также должны заменить onLoad на onload и указать top и left положение с блоком:

image_object.onload = function() { 
    image_object.style.position = 'absolute'; 
    image_object.style.zIndex = 1; 
    image_object.style.top = '100px'; 
    image_object.style.left = '100px'; 
} 

Demonstration

Answer 3

Я не вижу, что вы Добавляя изображения в DOM, который, вероятно, почему вы не видите, что

$('body').append($(image_object)); 

Answer 4

Я согласен, первым создать элемент с «IMG» метки, назначить значение ЦСИ к нему, и добавить его к текущему DIV (в этом случае его тело), ​​как так

var imgTag = document.createElement("img"); 
imgTag.src = '/img/spark.png'; 
document.body.appendChild(imgTag); 

Надеется, что это помогает.