Question

我想使用jQuery异步加载我的页面上的外部图像，我尝试了以下内容：

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

   },
   error: function(r,x) {

   }
});

但它总是会返回错误，甚至可以像这样加载图像吗？

我尝试使用.load方法并且它可以工作但我不知道如果图像不可用我怎么能设置超时（404）。我怎么能这样做？

Answer 1

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

Answer 2

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

我遇到的是使用过的处理器并不是正确的选择。在我的情况下通过JavaScript打印。因此，实际上有两种方法可以使用AJAX样式：

解决方案1 

使用Base64图像数据和REST图像服务。如果您有自己的Web服务，则可以添加以Base64编码提供图像的JSP / PHP REST脚本。现在这有用吗？我遇到了一种很酷的图像编码新语法：

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

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

欢呼声，将

Answer 3

使用jQuery你可以简单地改变＆＃34; src＆＃34;属性为＆＃34; data-src＆＃34;。图片无法加载。但该位置存储标记。我喜欢哪个。

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

Answer 4

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

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

Answer 5

您可以使用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之前，以防止缓存问题。

Answer 6

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

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

Answer 7

这也有效..

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

Answer 8

AFAIK你必须在这里执行一个.load（）函数，与.ajax（）相关，但你可以使用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>

Answer 9

使用.load加载图片。为了测试你是否收到错误（假设是404）你可以做以下事情：

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

小心 - 当src属性为图像为空时，不会触发.error（）事件。

Answer 10

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

Answer 11

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

使用jQuery异步加载图像

11 个答案: