Chargez les images de manière asynchrone avec jQuery

SI VOUS AVEZ VRAIMENT BESOIN D'UTILISER AJAX...

je suis venu à travers usecas où les gestionnaires de charge n'étaient pas le bon choix. Dans mon cas, lors de l'impression par javascript. Il y a donc en fait deux options pour utiliser le style AJAX pour ceci:

Solution 1

utiliser des données d'image Base64 et un service D'image REST. Si vous avez votre propre service Web, vous pouvez ajouter un script de repos JSP / PHP qui offre images en encodage Base64. Maintenant, comment est-ce utile? Je suis tombé sur une nouvelle syntaxe cool pour l'encodage de l'image:

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

pour que vous puissiez charger les données Image Base64 en utilisant Ajax et ensuite à la fin vous construisez la chaîne de données Base64 à l'image! Très amusant :). Je recommande d'utiliser ce site http://www.freeformatter.com/base64-encoder.html pour encodage d'image.

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

Solution2:

tromper le navigateur pour utiliser son cache. Cela vous donne un bon 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 leurs inconvénients: la première ne fonctionne que sur les navigateurs modernes. La seconde a des problèmes de performance et repose sur des hypothèses sur la façon dont le cache sera utilisé.

santé, va

en utilisant 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. Ce que j'aime.

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

un Simple morceau de jQuery copie les données-src à src, qui va commencer à charger l'image quand vous en avez besoin. Dans mon cas, quand 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 façon.

$(<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 à travers une liste de photos, si l'image est déjà en 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 y est déjà. La méthode ci-dessus réduit une requête vide au serveur après la première boucle d'images dans la galerie.

vous pouvez utiliser un objet différé pour le chargement asynchrone.

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

s'il vous Plaît prêter attention: l'image.onload doit être Avant image.src pour prévenir les problèmes avec le cache.

Si vous voulez juste pour définir la source de l'image vous pouvez utiliser cette.

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

ça marche aussi ..

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

AFAIK vous devez faire un .load () fonctionne ici comme appliqué à la .ajax(), mais vous pouvez utiliser jQuery setTimeout pour le 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>

utiliser .charger pour charger votre image. pour tester si vous obtenez une erreur (disons 404 ) vous pouvez faire ce qui suit:

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

attention -.erreur() événement ne se déclenche 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">');
    }
});