使用jQuery异步加载图像

不需要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);
        }
    });

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

我来过一些案例,在这些案例中,在线处理程序不是正确的选择。在我的例子中是通过javascript打印的。因此,实际上有两个选项可以使用AJAX样式:

解决方案1

使用Base64映像数据和REST映像服务。如果您有自己的webservice,那么可以添加一个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的一个简单部分将数据src复制到src,src将在需要时开始加载图像。在我的情况下,当页面完成加载。

$(document).ready(function(){
    $(".loadlater").each(function(index, element){
        $(element).attr("src", $(element).attr("data-src"));
    });
});

我打赌jQuery代码可以缩写,但是这样可以理解。

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

应该比ajax更好,因为如果它是一个库,而您正在遍历一个pic列表,如果图像已经在缓存中,它不会向服务器发送另一个请求。它将在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()事件将不会触发。

$(函数(){

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