pagina - esperar que termine una funcion javascript

Carga asíncrona de imágenes con jQuery

Question

Quiero cargar imágenes externas en mi página de forma asincrónica utilizando jQuery y he intentado lo siguiente:

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

   },
   error: function(r,x) {

   }
});

Pero siempre devuelve un error, ¿es posible cargar una imagen como esta?

Intenté usar el método .load y funciona, pero no tengo idea de cómo puedo configurar el tiempo de espera si la imagen no está disponible (404). ¿Cómo puedo hacer esto?

Answer 1

$ (función () {

    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 2

AFAIK tendrías que hacer una función .load () aquí como apposed a .ajax (), pero podrías usar jQuery setTimeout para mantenerla activa (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 3

Esto también funciona ..

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

Answer 4

No hay necesidad de ajax. Puede crear un nuevo elemento de imagen, establecer su atributo de origen y colocarlo en algún lugar del documento una vez que haya terminado de cargarse:

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 5

Puede utilizar un objeto diferido para la carga de 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);
});

Preste atención: image.onload debe estar antes de image.src para evitar problemas con la memoria caché.

Answer 6

Si solo quieres establecer la fuente de la imagen, puedes usar esto.

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

Answer 7

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

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

Una pieza simple 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 abreviarse, pero es comprensible de esta manera.

Answer 8

usa .load para cargar tu imagen. para probar si obtiene un error (digamos 404) puede hacer lo siguiente:

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

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

Answer 9

SI REALMENTE NECESITA UTILIZAR AJAX ...

Me encontré con casos de uso donde los controladores de carga no eran la opción correcta. En mi caso cuando imprimo a través de javascript. Entonces, en realidad, hay dos opciones para usar el estilo AJAX para esto:

Solución 1

Use 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? Encontré una nueva sintaxis para la codificación de imágenes:

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

¡De modo que puede cargar los datos de Image Base64 usando Ajax y luego, al finalizar, compila la cadena de datos Base64 a la imagen! Gran diversión :). Recomiendo utilizar 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);
});

Solution2:

Engañe al navegador para usar su caché. Esto le proporciona un buen fadeIn () cuando el recurso se encuentra en el caché de los navegadores:

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 sus inconvenientes: el primero solo funciona en navegadores modernos. El segundo tiene problemas de rendimiento y se basa en la suposición de cómo se usará el caché.

salud, voluntad

Answer 10

$(<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. Se solicitará en el caso de jQuery / ajax y devolverá un HTTP 304 (no modificado) y luego usará la imagen original de la memoria 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.