javascript - Why is my image not loading?

Question

At http://blajeny.com I have:

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';
    }

The intended effect, at this stage, is to load an image at the X and Y where the user clicked. (I want to do other things as well, like animate it, but right now I'm trying to get the image to show up where the user clicked.)

The javaScript console shows that the handler is being called, however I am not seeing what I expect, a hazy blue circle immediately below and to the right of the point where the mouse was clicked.

What can/should I do differently so it loads a fresh image below and to the right of the clicked coordinates?

Thanks,

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

您还必须替换onLoadby并用 unitonload指定topand位置：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';
}

示范

Answer 3

我没有看到您将图像附加到 DOM，这可能就是您看不到它的原因

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

Answer 4

我同意，首先使用“img”标签创建一个元素，为其分配 src 值，并将其附加到当前 div（在本例中为主体），如下所示

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

希望这可以帮助。