Précharger des images à partir d'un appel Ajax

Question

Quelqu'un pourrait-il m'aider à comprendre comment précharger les images de la page random.php afin que la première fois qu'il les charge se fane comme il se doit. À l'heure actuelle son obtenu un écho en vrac laid parce qu'ils ne sont pas préchargés, mais une fois que la page a été exécutée une fois qu'il se fane sur après l'autre parfaitement ...

//Loop through the images and print them to the page 
for (var i=0; i < totalBoxes; i++){ 
    $.ajax({ 
    url: "random.php?no=", 
    cache: false, 
    success: function(html) { 
     // following line I originally suggested, but let's make it better... 
     //$('#bg').append(html).fadeIn('slow'); 
     // also note the fine difference between append and appendTo. 
     var $d = $(html).hide().appendTo('#bg').fadeIn('slow'); 
     $('img', $d).hover(function() { 
     var largePath = $(this).attr("rel"); 
     $(this).fadeOut("slow", function() { 
      $(this).attr({ src: largePath }).fadeIn("slow"); 
     }); 
     }); 
    } 
    }); 
} 

Answer 1

L'autre jour, j'ai écrit un plugin rapide qui va prendre une série d'URL d'images et les précharger, tout en vous permettant de spécifier quoi faire après le chargement de chaque image et/ou après le chargement des images.

jQuery.extend(jQuery, { 
    imagesToLoad: 0, 
    loadedImages: [], 
    preloadImages: function(){ 
     var settings = { 
      urls : [], 
      begin : function(){}, 
      each : function(){}, 
      complete : function(){}, 
      scope: window 
     }; 
     jQuery.extend(settings, arguments[0]); 
     var images = []; 

     jQuery.imagesToLoad = settings.urls.length; 

     settings.begin.call(settings.scope, settings.urls); 
     for(var i = 0; i < settings.urls.length; i++){ 
      images[i] = new Image(); 
      images[i].onload = function(){ 
       settings.each.call(settings.scope,this); 
       jQuery.loadedImages.push(this); 
       if(jQuery.loadedImages.length >= jQuery.imagesToLoad){ 
        settings.complete.call(settings.scope,jQuery.loadedImages); 
       } 
      } 
      images[i].src= settings.urls[i]; 
     } 
    } 
}); 

Vous pouvez ensuite utiliser dans votre code en faisant quelque chose comme:

$.preloadImages({ 
    urls: ['path/to/image/1.jpg', 'path/to/image/2.jpg'], 
    begin: function(urls){ 
     console.log("loading images %o", urls); 
    }, 
    each: function(image){ 
     console.log("finished loading %s", image.src); 
    }, 
    complete: function(images){ 
     // do whatever after all the images are done loading 
    } 
}); 

Answer 2

Voici un truc que j'aime: sur une page avant aléatoire .php ajouter au en bas de la page un tag img qui référence l'image que vous voulez faire apparaître sur random.php. Ajoutez à la balise img une classe CSS qui est simplement display: none. Cela va amorcer le cache du navigateur de l'utilisateur avec l'image de sorte que quand ils vont à random.php l'image a déjà été téléchargée et votre fondu fonctionne comme prévu. Bien sûr, cela ne fonctionne que si random.php n'est pas la page de destination du site. Un autre facteur est le nombre d'images dont vous parlez et leur taille.