jQuery ajax没有预加载图像

时间:2010-05-11 08:29:15

标签: jquery jquery-tools preloading

我有一个画廊列表,当你点击图库的标题时,它会拉入内容(带有图像的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

看到这一点

提前致谢!

1 个答案:

答案 0 :(得分:3)

$.ajax不会为您执行任何图像预加载。它只是从指定的URL中检索数据。在您的情况下,您将数据附加为html($details.html(data))。浏览器然后看到该html中有图像并加载它们。

作为一种解决方法,我可以建议以下之一:

  1. 使用CSS背景(最好使用CSS精灵)
  2. 预加载所有引用的图像(here是一个可行的解决方案)