图像加载事件 - 来自用户定义的url / input的自定义图像 - load（）不起作用

Question

我想在自定义/用户定义的网址中加载图片时，实现一个简单的事件（span中的html更改）。

http://jsfiddle.net/n2m8u5xb/3/

$('#btn').click(function(){
    $(this).html('loading...'); //works
    $('#img').css("backgroundImage", "url('"+$("#img-url").html()+"')");
    $('#img-url').html(url('"+$("#img-url").html()+"'));
});
$('#img').load(function(){
    $('#btn').html('Go'); //doesn't work
});

此load()功能不起作用。我还尝试在点击功能中使用if else。

那么在这种情况下如何检测自定义图像加载以及如何触发事件？

这里有一些用于快速测试的随机大图像（最小 - 最大）：

http://i.imgur.com/tJVDlKz.jpg

http://i.imgur.com/NZllSc0.jpg

http://photojournal.jpl.nasa.gov/jpeg/PIA13932.jpg

Answer 1

您可以使用＆＃34; img＆＃34;为此标记，或者如果您坚持使用背景图像，您可以先通过javascript加载它然后将其作为css

类似的东西：

$('#btn').click(function(){
$(this).html('loading...');

var img = new Image(),
url = $("#img-url").html();
img.onload = function () { 
   $('#img').css("backgroundImage", "url('"+url+"')");
   $('#btn').html('Go');
};
img.src = url;

$('#img-url').html("url('"+url+"')");
});