代码之家  ›  专栏  ›  技术社区  ›  George Wiscombe

jqueryajax未预加载图像

  •  2
  • George Wiscombe  · 技术社区  · 14 年前

    我有一个画廊的列表,当你点击一个画廊的标题时,它会拉入内容(带图像的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 回复  |  直到 14 年前
        1
  •  3
  •   Atanas Korchev    14 年前

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

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

    1. 预加载所有引用的图像( here 是有效的解决方案)