我想我的页面异步使用jQuery上加载外部图像和我已经试过如下：异步加载图像使用jQuery
$.ajax({
url: "http://somedomain.com/image.jpg",
timeout:5000,
success: function() {
},
error: function(r,x) {
}
});
但它总是返回错误，它甚至有可能加载图像像这个？
我试图使用.load方法，它的工作原理，但我不知道如何设置超时如果图像不可用（404）。我怎样才能做到这一点？
无需AJAX 。您可以创建一个新的形象元素，设置它的source属性某处放置在文档中一旦完成加载：
var img = $("<img />").attr('src', 'http://somedomain.com/image.jpg')
.on('load', function() {
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
alert('broken image!');
} else {
$("#something").append(img);
}
});
据我所知，你必须在这里做一个.load（）函数，而不是对阿贾克斯（），但你可以使用jQuery的setTimeout保持它生活（ISH）
<script>
$(document).ready(function() {
$.ajaxSetup({
cache: false
});
$("#placeholder").load("PATH TO IMAGE");
var refreshId = setInterval(function() {
$("#placeholder").load("PATH TO IMAGE");
}, 500);
});
</script>
对不起，我稍微误解了你的Q，我以为你正在加载的图像正在改变或什么（因此阿贾克斯位） – benhowdle89 2010-11-26 11:56:59
如果你只是想设置您可以使用此图片的来源。
$("img").attr('src','http://somedomain.com/image.jpg');
使用.load加载您的图像。如果你得到一个错误测试（假设404），你可以做到以下几点：
$("#img_id").error(function(){
//$(this).hide();
//alert("img not loaded");
//some action you whant here
});
小心 - 当src属性为空的图像.error（）事件不会触发。
$(<img />).attr('src','http://somedomain.com/image.jpg');
应该比阿贾克斯更好，因为如果它的画廊，你是通过图片列表循环，如果图像已经在缓存中，它不会发送另一个请求到服务器。它将在jQuery/ajax的情况下请求并返回一个HTTP 304（未修改），然后使用缓存中的原始图像（如果其已存在）。上述方法减少了图库中第一个图像循环后对服务器的空请求。
如果你确实需要使用Ajax ...
我来到翻过usecases在onload事件处理程序是不是正确的选择。在我的情况下，通过JavaScript打印。所以实际上有两种选择使用AJAX风格的：
解决方案1
使用Base64编码的图像数据和REST图像服务。如果您有自己的Web服务，则可以添加一个JSP/PHP REST脚本，该脚本以Base64编码提供图像。现在这有什么用？我碰到一个很酷的新的语法来对图像编码：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhE..."/>
所以，你可以加载使用Ajax图像Base64编码数据，然后在完成你建立Base64编码数据串的图像！非常有趣 ：）。我建议使用此网站http://www.freeformatter.com/base64-encoder.html进行图像编码。
$.ajax({
url : 'BASE64_IMAGE_REST_URL',
processData : false,
}).always(function(b64data){
$("#IMAGE_ID").attr("src", "data:image/png;base64,"+b64data);
});
溶液2：
招数使用缓存的浏览器。这给你一个很好的淡入（）当资源是在浏览器的缓存：
var url = 'IMAGE_URL';
$.ajax({
url : url,
cache: true,
processData : false,
}).always(function(){
$("#IMAGE_ID").attr("src", url).fadeIn();
});
然而，这两种方法都有它的缺点：一是只适用于现代的浏览器。第二个有性能故障，并依靠假设如何使用缓存。
欢呼声， 将
您可以使用异步加载一个Deferred对象。
function load_img_async(source) {
return $.Deferred (function (task) {
var image = new Image();
image.onload = function() {task.resolve(image);}
image.onerror = function() {task.reject();}
image.src=source;
}).promise();
}
$.when(load_img_async(IMAGE_URL)).done(function (image) {
$(#id).empty().append(image);
});
请注意：image.onload必须在image.src之前，以防止缓存问题。
使用jQuery，您可以简单地将“src”属性更改为“data-src”。图像不会被加载。但该位置存储与标签。我喜欢哪个。
<img class="loadlater" data-src="path/to/image.ext"/>
一段简单的jQuery拷贝数据的src为src，这将启动加载图像时，你需要它。在我的情况下，当页面完成加载。
$(document).ready(function(){
$(".loadlater").each(function(index, element){
$(element).attr("src", $(element).attr("data-src"));
});
});
我敢打赌，jQuery代码可以缩写，但这是可以理解的。
$（函数（）{
if ($('#hdnFromGLMS')[0].value == 'MB9262') {
$('.clr').append('<img src="~/Images/CDAB_london.jpg">');
}
else
{
$('.clr').css("display", "none");
$('#imgIreland').css("display", "block");
$('.clrIrland').append('<img src="~/Images/Ireland-v1.jpg">');
}
});
这工作太..
var image = new Image();
image.src = 'image url';
image.onload = function(e){
// functionalities on load
}
$("#img-container").append(image);
这对我的作品：https://stackoverflow.com/questions/6150289/how-to-convert -image-into-base64-string-using-javascript – MrRhoads 2017-10-11 02:07:18