用jQuery异步加载图像

我想使用jQuery在页面上异步加载外部图像，并且尝试了以下方法：

$.ajax({ 
   url: "http://somedomain.com/image.jpg", 
   timeout:5000,
   success: function() {

   },
   error: function(r,x) {

   }
});

但是它总是返回错误，是否有可能像这样加载图像？

我尝试使用.loadmethod，但是它可以工作，但是我不知道如果图像不可用，如何设置超时时间（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);
        }
    });

如果您真的需要使用AJAX ...

我遇到了一些用例，其中onload处理程序不是正确的选择。以我为例，通过javascript打印时。因此，实际上有两种方法可以使用AJAX样式：

解决方案1

使用Base64图像数据和REST图像服务。如果您拥有自己的Web服务，则可以添加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();
});   

但是，这两种方法都有其缺点：第一种方法仅适用于现代浏览器。第二个有性能故障，并依赖于将如何使用缓存的假设。

欢呼，将

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

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

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

您可以使用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);
});

请注意：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">');
    }
});