jQuery ajax没有预先加载图像

我点击一个画廊的标题时会显示一个画廊列表（带图像的HTML）。jQuery ajax没有预先加载图像

当内容拉入它预加载的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

提前感谢！

来源

2010-05-11 George Wiscombe

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

作为一种变通方法我可以建议下列之一：

使用CSS背景代替（优选与CSS子画面）
预载所有参考的图像（here是一个可行的解决方案）

来源

2010-05-11 09:34:49

嗨，感谢您的回复，我真的不想使用CSS背景图像，它不是很容易访问，并可能成为一个噩梦来维护。第二个选项看起来不错，不知道如何将其与我的代码整合 - 帮助表示赞赏:) – 2010-05-11 10:34:29

包括从该博客帖子实施preloadImages例程。在$（document）.ready（）中调用preloadImages例程并指定要加载的图像的url。 – 2010-05-11 12:32:02

jQuery ajax没有预先加载图像

回答

相关问题