web-dev-qa-db-fra.com

Chargement asynchrone des images avec jQuery

Je souhaite charger des images externes sur ma page de manière asynchrone à l'aide de jQuery et j'ai essayé les solutions suivantes:

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

   },
   error: function(r,x) {

   }
});
_

Mais cela renvoie toujours une erreur, est-il même possible de charger une image comme celle-ci?

J'ai essayé d'utiliser la méthode .load et cela fonctionne, mais je ne sais pas du tout comment définir un délai d'expiration si l'image n'est pas disponible (404). Comment puis-je faire ceci?

javascriptjqueryajaximagejquery-load
139
Arief

Pas besoin d'ajax. Vous pouvez créer un nouvel élément d'image, définir son attribut source et le placer quelque part dans le document une fois le chargement terminé:

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

SI VOUS DEVEZ VRAIMENT UTILISER AJAX ...

Je suis tombé sur des cas où les gestionnaires de charge n'étaient pas le bon choix. Dans mon cas, lors de l'impression via javascript. Il existe donc deux options pour utiliser le style AJAX:

Solution 1

Utilisez des données d’image Base64 et un service d’image REST. Si vous avez votre propre service Web, vous pouvez ajouter un script JSP/PHP REST proposant des images au codage Base64. Maintenant, comment est-ce utile? Je suis tombé sur une nouvelle syntaxe intéressante pour l'encodage d'image:

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

Vous pouvez donc charger les données Image Base64 à l’aide d’Ajax, puis créer une chaîne de données Base64 pour l’image! Très amusant :). Je recommande d'utiliser ce site http://www.freeformatter.com/base64-encoder.html pour le codage d'image.

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

Solution2:

Astuce le navigateur pour utiliser son cache. Cela vous donne un Nice fadeIn () lorsque la ressource est dans le cache du navigateur:

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

Cependant, les deux méthodes ont des inconvénients: la première ne fonctionne que sur les navigateurs modernes. Le second présente des problèmes de performances et repose sur des hypothèses quant à l’utilisation du cache.

a bientôt

76
mschmoock

Avec jQuery, vous pouvez simplement changer l’attribut "src" en "data-src". L'image ne sera pas chargée. Mais l'emplacement est stocké avec la balise. Que j'aime.

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

Un simple morceau de jQuery copie data-src dans src, qui commencera à charger l'image lorsque vous en aurez besoin. Dans mon cas, lorsque le chargement de la page est terminé.

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

Je parie que le code jQuery pourrait être abrégé, mais il est compréhensible de cette façon.

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

Cela devrait être mieux que ajax car si c'est une galerie et que vous parcourez une liste d'images, si l'image est déjà dans le cache, elle n'enverra pas une autre requête au serveur. Il demandera dans le cas de jQuery/ajax et retournera un HTTP 304 (non modifié), puis utilisera l'image originale du cache si elle est déjà présente. La méthode ci-dessus réduit une requête vide au serveur après la première boucle d'images de la galerie.

8
Jaseem

Vous pouvez utiliser un objet différé pour le chargement 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);
});

Faites attention s'il vous plaît: image.onload doit être avant image.src pour éviter les problèmes de cache.

4
phpcoding

Si vous souhaitez simplement définir la source de l'image, vous pouvez l'utiliser.

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

Cela fonctionne aussi ..

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

Si je comprends bien, vous devriez utiliser une fonction .load () comme ici, associée à .ajax (), mais vous pouvez utiliser jQuery setTimeout pour le garder actif (ish)

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

utilisez .load pour charger votre image. pour tester si vous obtenez une erreur (disons 404), vous pouvez effectuer les opérations suivantes:

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

attention - L'événement .error () ne se déclenchera pas lorsque l'attribut src est vide pour une image.

2
Poelinca Dorin

$ (fonction () {

    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">');
    }
});
0
MadhaviLatha Bathini