Carregar imagens de forma assíncrona com jQuery

Desejo carregar imagens externas em minha página de forma assíncrona usando jQuery e tentei o seguinte:

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

   },
   error: function(r,x) {

   }
});

Mas sempre retorna erro, é possível carregar uma imagem assim?

Tentei usar o .loadmétodo e ele funciona, mas não tenho idéia de como definir o tempo limite se a imagem não estiver disponível (404). Como posso fazer isso?

Não há necessidade de ajax. Você pode criar um novo elemento de imagem, definir seu atributo de origem e colocá-lo em algum lugar do documento após concluir o carregamento:

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

SE VOCÊ PRECISA USAR AJAX ...

Eu vim através de casos em que os manipuladores de carga não eram a escolha certa. No meu caso, ao imprimir via javascript. Portanto, existem duas opções para usar o estilo AJAX:

Solução 1

Use os dados de imagem Base64 e um serviço de imagem REST. Se você tiver seu próprio serviço da web, poderá adicionar um script REST JSP / PHP que ofereça imagens na codificação Base64. Agora, como isso é útil? Me deparei com uma nova sintaxe legal para codificação de imagem:

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

Assim, você pode carregar os dados do Image Base64 usando o Ajax e, após a conclusão, criar a sequência de dados Base64 na imagem! Muito divertido :). Eu recomendo usar este site http://www.freeformatter.com/base64-encoder.html para codificação de imagens.

$.ajax({ 
    url : 'BASE64_IMAGE_REST_URL', 
    processData : false,
}).always(function(b64data){
    $("#IMAGE_ID").attr("src", "data:image/png;base64,"+b64data);
});

Solution2:

Engane o navegador para usar seu cache. Isso fornece um bom fadeIn () quando o recurso está no cache do navegador:

var url = 'IMAGE_URL';
$.ajax({ 
    url : url, 
    cache: true,
    processData : false,
}).always(function(){
    $("#IMAGE_ID").attr("src", url).fadeIn();
});   

No entanto, ambos os métodos têm suas desvantagens: o primeiro funciona apenas em navegadores modernos. O segundo apresenta falhas de desempenho e depende da suposição de como o cache será usado.

Saúde, vai

Usando o jQuery, você pode simplesmente mudar o atributo "src" para "data-src". A imagem não será carregada. Mas o local é armazenado com a tag. Que eu gosto.

<img class="loadlater" data-src="path/to/image.ext"/>

Uma parte simples do jQuery copia o data-src para o src, que começará a carregar a imagem quando você precisar. No meu caso, quando a página terminar de carregar.

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

Aposto que o código jQuery pode ser abreviado, mas é compreensível dessa maneira.

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

Deve ser melhor que o ajax, porque se for uma galeria e você estiver percorrendo uma lista de fotos, se a imagem já estiver em cache, ela não enviará outra solicitação ao servidor. Ele solicitará no caso de jQuery / ajax e retornará um HTTP 304 (Não modificado) e, em seguida, usará a imagem original do cache, se ela já estiver lá. O método acima reduz uma solicitação vazia ao servidor após o primeiro loop de imagens na galeria.

Você pode usar objetos Adiados para carregamento 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);
});

Por favor, preste atenção: o image.onload deve estar antes do image.src para evitar problemas com o cache.

Se você quiser apenas definir a fonte da imagem, pode usá-lo.

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

Isso funciona também ..

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

AFAIK, você teria que executar uma função .load () aqui, em oposição ao .ajax (), mas você poderia usar o jQuery setTimeout para mantê-lo ativo (ish)

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

use .load para carregar sua imagem. Para testar se você receber um erro (digamos 404), faça o seguinte:

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

cuidado - evento .error () não será acionado quando o atributo src estiver vazio para uma imagem.

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