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”标签创建一个元素，为其指定src值，然后将其附加到当前div（在本例中为正文），就像这样

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

希望这有帮助。

为什么我的图片没有加载？

4 个答案: