我想使用 jQuery 在我的页面上异步加载外部图像，我尝试了以下方法：
$.ajax({
url: "http://somedomain.com/image.jpg",
timeout:5000,
success: function() {
},
error: function(r,x) {
}
});
但它总是返回错误，甚至可以像这样加载图像吗？
我尝试使用.load 方法并且它有效，但我不知道如果图像不可用（404）如何设置超时。我该怎么做？
【问题讨论】：
标签： javascript jquery ajax image jquery-load
不需要ajax。您可以创建一个新的图像元素，设置其源属性，并在完成加载后将其放置在文档中的某个位置：
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);
}
});
【讨论】：
paint 或 layout 操作，并且肯定会延迟任何 onload 事件依赖项。跨度>
如果你真的需要使用 AJAX...
我遇到过 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：
欺骗浏览器使用其缓存。当资源在浏览器缓存中时，这为您提供了一个不错的 fadeIn()：
var url = 'IMAGE_URL';
$.ajax({
url : url,
cache: true,
processData : false,
}).always(function(){
$("#IMAGE_ID").attr("src", url).fadeIn();
});
但是，这两种方法都有其缺点：第一种仅适用于现代浏览器。第二个存在性能故障并依赖于假设缓存将如何使用。
干杯， 会
【讨论】：
使用 jQuery，您可以简单地将“src”属性更改为“data-src”。图像不会被加载。但是位置是用和标签存储的。我喜欢。
<img class="loadlater" data-src="path/to/image.ext"/>
一个简单的 jQuery 将 data-src 复制到 src，它将在您需要时开始加载图像。在我的情况下，当页面完成加载时。
$(document).ready(function(){
$(".loadlater").each(function(index, element){
$(element).attr("src", $(element).attr("data-src"));
});
});
我敢打赌 jQuery 代码可以缩写，但这样可以理解。
【讨论】：
data-标签，通过$(element).data('src')而不是$(element).attr('data-src')访问它们会更容易
$(<img />).attr('src','http://somedomain.com/image.jpg');
应该比 ajax 更好，因为如果它是一个画廊并且您正在循环浏览图片列表，如果图像已经在缓存中，它不会向服务器发送另一个请求。它将在 jQuery/ajax 的情况下请求并返回 HTTP 304（未修改），然后使用缓存中的原始图像（如果它已经存在）。上述方法在图库中的第一个图像循环之后减少了对服务器的空请求。
【讨论】：
您可以使用延迟对象进行异步加载。
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 之前，以防止缓存出现问题。
【讨论】：
如果你只是想设置图像的来源，你可以使用它。
$("img").attr('src','http://somedomain.com/image.jpg');
【讨论】：
这也有效..
var image = new Image();
image.src = 'image url';
image.onload = function(e){
// functionalities on load
}
$("#img-container").append(image);
【讨论】：
AFAIK 您必须在此处执行与 .ajax() 相对的 .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>
【讨论】：
使用 .load 加载您的图像。要测试您是否收到错误（例如 404 ），您可以执行以下操作：
$("#img_id").error(function(){
//$(this).hide();
//alert("img not loaded");
//some action you whant here
});
小心 - 当图像的 src 属性为空时，不会触发 .error() 事件。
【讨论】：
//Puedes optar por esta solución:
var img = document.createElement('img');
img.setAttribute('src', element.source)
img.addEventListener('load', function(){
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
alert('broken image!');
} else {
$("#imagenesHub").append(img);
}
});【讨论】：
$(function () {
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">');
}
});
【讨论】：