javascript - 图像加载事件 - 来自用户定义的 url / 输入的自定义图像 - load() 不起作用

Question

span当来自自定义/用户定义的 url 的图像被加载时，我想实现一个简单的事件（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+"')");
});