JQuery AJAX не предварительная загрузка изображений

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. Предварительная загрузка всех ссылочных изображений ( вот рабочее решение)