Chargement asynchrone d'images avec jQuery

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 qu'il a fini de charger:

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

SI VOUS AVEZ BESOIN D'UTILISER AJAX …

Je suis allé à travers les usecases où les gestionnaires onload 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 pour ceci:

Solution 1

Utilisez les données d'image Base64 et un service d'image REST. Si vous disposez de votre propre service web, vous pouvez ajouter un script REST JSP / PHP qui offre des images dans l'encodage Base64. Maintenant, comment est-ce utile? J'ai rencontré une nouvelle syntaxe cool pour le codage d'image:

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

Vous pouvez donc charger les données Image Base64 à l'aide d'Ajax et, à la fin, vous avez créé la chaîne de données Base64 sur l'image! Très amusant :). Je recommande d'utiliser ce site http://www.freeformatter.com/base64-encoder.html pour l'encodage d'image.

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

Solution2:

Trucez le navigateur pour utiliser son cache. Cela vous donne une belle fadeIn () lorsque la ressource est dans le cache des navigateurs:

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

Cependant, les deux méthodes présentent leurs inconvénients: la première ne fonctionne que sur les navigateurs modernes. Le second comporte des problèmes de performance et repose sur l'hypothèse selon laquelle le cache sera utilisé.

Cheers, will

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

Devrait être mieux que ajax car si c'est une galerie et que vous faites une boucle dans une liste de photos, si l'image est déjà en cache, elle n'émettra pas une autre requête au serveur. Il demandera dans le cas de jQuery / ajax et renvoie un HTTP 304 (Non modifié), puis utilisez l'image originale du cache s'il est déjà là. La méthode ci-dessus réduit une demande vide au serveur après la première boucle d'images dans la galerie.

En utilisant jQuery, vous pouvez simplement modifier l'attribut "src" à "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 élément simple de jQuery copie les données-src vers src, qui va commencer à charger l'image lorsque vous en avez besoin. Dans mon cas lorsque la page a fini de charger.

 $(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 c'est compréhensible de cette façon.

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: image.onload doit être avant image.src pour éviter les problèmes de cache.

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

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

Cela fonctionne aussi …

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

AFAIK vous devriez faire une fonction .load () ici comme apposée sur .ajax (), mais vous pouvez utiliser jQuery setTimeout pour la garder en direct (ish)

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

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.

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

Vous pourriez le faire … ou vous pouvez utiliser ce code qui fonctionne de la même manière et est plus petit.

 $(function() { $('body').append('<img src="images.png">'); }); 

Cela permet d'économiser du code.