Cargar imágenes de forma asíncrona con jQuery

SI REALMENTE NECESITA USAR AJAX...

Llegué a través de casos de uso donde los manejadores de carga no eran la elección correcta. En mi caso al imprimir a través de javascript. Así que en realidad hay dos opciones para usar el estilo AJAX para esto:

Solución 1

Utilice datos de imagen Base64 y un servicio de imagen REST. Si tiene su propio servicio web, puede agregar un script REST JSP/PHP que ofrezca imágenes en codificación Base64. Ahora, ¿cómo es eso útil? Me encontré con una nueva sintaxis para codificación de imagen:

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

Para que pueda cargar los datos de la imagen Base64 utilizando Ajax y luego al finalizar, construya la cadena de datos Base64 en la imagen. Muy divertido:). Recomiendo usar este sitio http://www.freeformatter.com/base64-encoder.html para la codificación de imágenes.

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

Solución 2:

Engañar al navegador para que use su caché. Esto le da una buena fadeIn () cuando el recurso está en la caché del navegador:

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

Sin embargo, ambos métodos tienen su inconvenientes: El primero solo funciona en navegadores modernos. El segundo tiene fallos de rendimiento y se basa en la suposición de cómo se utilizará la caché.

Saludos, will

Usando jQuery puede simplemente cambiar el atributo "src" a "data-src". La imagen no se cargará. Pero la ubicación se almacena con la etiqueta. Que me gusta.

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

Una simple pieza de jQuery copia data-src a src, que comenzará a cargar la imagen cuando la necesite. En mi caso cuando la página ha terminado de cargarse.

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

Apuesto a que el código jQuery podría ser abreviado, pero es comprensible de esta manera.

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

Debería ser mejor que ajax porque si es una galería y estás recorriendo una lista de fotos, si la imagen ya está en caché, no enviará otra solicitud al servidor. Solicitará en el caso de jQuery / ajax y devolverá un HTTP 304 (No modificado) y luego utilizará la imagen original de la caché si ya está allí. El método anterior reduce una solicitud vacía al servidor después del primer bucle de imágenes en la galería.

Puede utilizar un objeto Diferido para la carga ASÍNCRONA.

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 atención: imagen.onload debe estar antes de la imagen.src para evitar problemas con la caché.

Si solo desea establecer el origen de la imagen, puede usar esto.

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

Esto también funciona ..

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

AFAIK usted tendría que hacer un .load () función aquí como apposed a la .ajax (), pero puedes usar jQuery setTimeout para mantenerlo activo (ish)

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

Uso .cargar para cargar tu imagen. para probar si obtienes un error (digamos 404 ) puedes hacer lo siguiente:

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

Cuidado - .el evento error () no se activará cuando el atributo src esté vacío para una imagen.

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