jQuery AJAX 图片加载

$(document).ready(function() {
//点击按钮时，发送ajax请求
$('#btn-load-img').click(function() {
//获取图片地址
var imgUrl = $('#img-url').val();
//发送ajax请求
$.ajax({
type: 'GET',
url: imgUrl,
beforeSend: function() {
//显示loading提示
$('#loading').show();
},
success: function() {
//隐藏loading提示
$('#loading').hide();
//将图片显示在页面上
$('#img-container').html('');
},
error: function() {
//显示错误提示
$('#error').show();
}
});
});
});

通过以上的代码，可以实现在页面上加载图片。首先，需要在页面中添加一个输入框，用于获取图片的URL。同时，还需要在页面上添加一个按钮，用于触发ajax请求。

点击按钮时，会发送ajax请求。请求的URL就是从输入框中获取的图片地址。发送请求时，还可以添加一些回调函数，如beforeSend、success、error。beforeSend回调函数可以在ajax请求发送之前执行一些操作，例如显示loading提示。success回调函数则在ajax请求成功时执行。如果请求失败，则会执行error回调函数，此时可以显示一些错误提示。

最后，在ajax请求成功后，会将图片显示在页面上。这里使用了jQuery的html函数，用于向页面中添加HTML代码。具体而言，使用了img标签来显示图片，其中的src属性值就是ajax请求获取到的图片URL。