javascript - 图像加载事件 - 来自用户定义的 url/输入的自定义图像 - 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

您可以为此使用“img”标签，或者如果您坚持使用背景图像，您可以首先通过 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+"')");
});