为什么我的图像未加载？

在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控制台显示处理程序正在被调用，但是我没有看到我期望的，一个朦胧的蓝色圆圈，紧挨着鼠标点击的右下方。

我能做什么/应该做什么不同，因此它会在点击坐标的下方和右侧加载新图像？

感谢，

来源

2013-02-15 JonathanHayward

@all，谢谢你的回复。我现在有了我的直接目标。 – JonathanHayward 2013-02-15 19:56:39

据我所知， 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);

来源

2013-02-15 19:09:57

你永远不追加图像的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

来源

2013-02-15 19:09:31

我没有看到你追加图像DOM这可能是为什么你没有看到它

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

来源

2013-02-15 19:11:48 srosh

我同意，先用“IMG”标签创建一个元素，分配SRC值给它，它（它的身体在这种情况下），附加到当前DIV，像这样

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

希望这有助于。

来源

2013-02-15 19:19:32

为什么我的图像未加载？

回答

相关问题