使用 jQuery 异步加载图像

AFAIK 你必须做一个。这里的 load ()函数与。Ajax () ，但是您可以使用 jQuerysetTimeout 来保持其活动(ish)

<script>
$(document).ready(function() {
$.ajaxSetup({
cache: false
});
$("#placeholder").load("PATH TO IMAGE");
var refreshId = setInterval(function() {
$("#placeholder").load("PATH TO IMAGE");
}, 500);
});
</script>

不需要 Ajax。您可以创建一个新的 image 元素，设置它的源属性，并在文档完成加载后将其放置在文档中的某个位置:

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);
}
});

如果你只是想设置图像的源，你可以使用这个。

$("img").attr('src','http://somedomain.com/image.jpg');

使用。载入你的图像。要测试是否出现错误(比方说404) ，可以执行以下操作:

$("#img_id").error(function(){
//$(this).hide();
//alert("img not loaded");
//some action you whant here
});

当图像的 src 属性为空时，将不会触发 care-. error ()事件。

$(<img />).attr('src','http://somedomain.com/image.jpg');

应该比 ajax 更好，因为如果它是一个画廊，您正在循环通过一个图片列表，如果图像已经在缓存中，它不会发送另一个请求到服务器。它将在 jQuery/ajax 的情况下请求并返回一个 HTTP 304(未修改) ，然后使用缓存中的原始图像(如果已经存在)。上述方法减少了在画廊中的第一个图像循环之后向服务器发出的空请求。

如果你真的需要使用 AJAX..。

我遇到过 onload 处理程序不是正确选择的情况。在我的情况下，当通过 javascript 打印。所以实际上有两种选择来使用 AJAX 风格:

解决方案1

使用 Base64图像数据和 REST 图像服务。如果您有自己的 webservice，那么可以添加一个 JSP/PHP REST 脚本，该脚本以 Base64编码提供图像。这有什么用？我发现了一种很酷的新的图像编码语法:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhE..."/>

因此，您可以使用 Ajax 加载 Image 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();
});

然而，这两种方法都有其缺点: 第一种方法只能在现代浏览器上使用。第二种方法存在性能问题，并且依赖于如何使用缓存的假设。

干杯, 威尔

可以使用 Deferred 对象加载 ASYNC。

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);
});

请注意: onload 必须位于 image.src 之前，以防止缓存出现问题。

使用 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 代码可以缩写，但这样做是可以理解的。

$(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">');
}
});

这个也可以。

var image = new Image();
image.src = 'image url';
image.onload = function(e){
// functionalities on load
}
$("#img-container").append(image);