jQuery Ajax pas de préchargement des images

Question

J'ai une liste de galeries, lorsque vous cliquez sur le titre d'une galerie, il tire dans le contenu (HTML avec des images).

Lorsque le contenu est tiré dedans précharge le html mais pas les images, des idées?

C'est le JavaScript que je utilise:

$('#ajax-load').ajaxStart(function() { 
    $(this).show(); 
}).ajaxStop(function() { $(this).hide();}); 


// PORTFOLIO SECTION 
    // Hide project details on load 
    $('.project > .details').hide(); 
    // Slide details up/down on click 
    $('.ajax > .header').click(function() { 
     if ($(this).siblings(".details").is(":hidden")) { 
     var detailUrl = $(this).find("a").attr("href"); 
     var $details = $(this).siblings(".details"); 

     $.ajax({ 
      url: detailUrl, 
      data: "", 
      type: "GET", 
      success: function(data) { 
        $details.empty(); 
        $details.html(data); 
        $details.find("ul.project-nav").tabs($details.find(".pane"), {effect: 'fade'}); 
        $details.slideDown("slow"); 
      }}); 
     } 
     else {$(this).siblings(".details").slideUp();} 
     return false; 
    }); 

Vous pouvez voir cette démonstration à http://www.georgewiscombe.com

Merci à l'avance!

Answer 1

$.ajax ne fait pas de préchargement d'image pour vous. Il récupère simplement les données de l'URL spécifiée. Dans votre cas, vous ajoutez les données au format html ($details.html(data)). Le navigateur voit alors qu'il y a des images dans ce code HTML et les charge.

Pour contourner le problème que je peux suggérer une des options suivantes:

1. Utilisez milieux CSS à la place (de préférence avec un sprite CSS)
2. préchargement toutes les images référencées (here est une solution de travail)