jQuery ajax not preloading images

Question

У меня есть список галерей, когда вы нажимаете на название галереи, оно тянет содержимое (HTML с изображениями).

Когда содержимое втягивается в него, предварительно загружает html, а не изображения, какие-либо идеи?

Это является JavaScript, я использую:

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

Вы можете увидеть это продемонстрировано на http://www.georgewiscombe.com

Спасибо заранее!

Answer 1

$.ajax не предназначен для предварительной загрузки изображений. Он просто извлекает данные из указанного URL-адреса. В вашем случае вы добавляете данные как html ($details.html(data)). Затем браузер видит, что есть изображения в этом html и загружает их.

В качестве временного решения можно предложить одно из следующих действий:

1. Использование CSS фона вместо (желательно с CSS спрайтов)
2. Preload все упомянутые изображения (here это рабочий раствор)