Charger les images générées dynamiquement du cache

Question

Bonjour J'ai cette fonction de rappel lorsqu'une image est téléchargée sur le serveur et je veux donc montrer cette image sous forme de vignette générée par un script PHP

'onComplete' : function(event, ID, fileObj, name,response, data) { 
      var newfile = '/admin/includes/image.php?filename='+name+'&maxw=150'; 
      $('#uploaded_images').append('<li class="'+ID+'"><img src="/site_images/ajax-loader.gif"" alt="" /></li>').fadeIn('fast'); 
      $.get(newfile, function(){ 
       $('.'+ID).fadeOut().empty(); 
       $("."+ID).append('<img src="'+newfile+'" alt="" />').fadeIn(); 


}); 

le » .get "La fonction jquery est supposée montrer le tag img seulement après le chargement de l'image (et c'est le cas) le problème est que lorsque j'imprime l'étiquette img, l'image est chargée à nouveau. Cela ne se fait pratiquement que dans le "conteneur" de l'image. L'image continuera à apparaître uniquement lorsqu'elle est chargée et sans aucun effet. Y at-il un moyen que je peux organiser le script pour utiliser l'image mise en cache avec "get" ou réellement tout imprimer seulement lorsque l'image est chargée directement?

Merci

Answer 1

Au lieu de $.get(), utilisez l'événement .load() de l'image, comme ceci:

$("<img />").load(function() { 
    var img = this; 
    $('.'+ID).fadeOut(function() { $(this).html(img); }).fadeIn(); 
}).attr("src", newfile); 

Ce que cela fait est lorsque l'élément d'image que nous créons le chargement des finitions, se fanent la élément .ID, lorsque les finitions de fondu, le contenu à définir l'élément <img> (.html(elem) est un raccourci pour .empty().append()), puis fade avant.