jQuery ajax 不预加载图像答案

【问题标题】：jQuery ajax not preloading imagesjQuery ajax 不预加载图像
【发布时间】：2010-05-11 08:29:14
【问题描述】：

我有一个画廊列表，当您单击画廊的标题时，它会拉入内容（带有图像的 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看到这个演示

提前致谢！

【问题讨论】：

标签： jquery jquery-tools preloading

【解决方案1】：

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

作为一种解决方法，我可以提出以下建议之一：

改用 CSS 背景（最好使用 CSS 精灵）
预加载所有引用的图像（here 是一个可行的解决方案）

【讨论】：

您好，感谢您的回复，我真的不想使用 CSS 背景图像，它不是很容易访问并且可能成为维护的噩梦。第二个选项看起来不错，不知道如何将它与我的代码集成——感谢帮助:)
包含博客文章中 preloadImages 例程的实现。在 $(document).ready() 中调用 preloadImages 例程并指定要预加载的图像的 url。