146

我想使用 jQuery 在我的页面上异步加载外部图像,我尝试了以下方法:

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

   },
   error: function(r,x) {

   }
});

但它总是返回错误,甚至可以像这样加载图像吗?

我尝试使用.load方法并且它有效,但我不知道如果图像不可用(404)如何设置超时。我怎样才能做到这一点?

4

11 回答 11

204

不需要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);
        }
    });
于 2010-11-26T11:54:46.740 回答
80

如果你真的需要使用 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();
});   

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

干杯,会

于 2012-10-03T18:11:43.423 回答
12

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

于 2015-06-14T17:39:04.457 回答
9
$(<img />).attr('src','http://somedomain.com/image.jpg');

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

于 2011-07-15T13:39:07.413 回答
4

您可以使用延迟对象进行异步加载。

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 之前,以防止缓存出现问题。

于 2014-10-20T20:31:38.213 回答
3

如果您只想设置图像的来源,您可以使用它。

$("img").attr('src','http://somedomain.com/image.jpg');
于 2010-11-26T11:54:46.937 回答
3

这也有效..

var image = new Image();
image.src = 'image url';
image.onload = function(e){
  // functionalities on load
}
$("#img-container").append(image);
于 2016-11-02T13:49:25.080 回答
2

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>
于 2010-11-26T11:53:51.570 回答
2

使用 .load 加载您的图像。要测试您是否收到错误(例如 404 ),您可以执行以下操作:

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

小心 - 当图像的 src 属性为空时,不会触发 .error() 事件。

于 2010-11-26T12:00:15.190 回答
0
$(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">');
        }
    });
于 2016-02-20T06:39:02.707 回答
0

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

于 2021-07-12T02:19:52.363 回答