2

ギャラリーのリストがあります。ギャラリーのタイトルをクリックすると、コンテンツ (画像付きの 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でデモを見ることができます。

前もって感謝します！

4

1 に答える 1

3

$.ajaxは画像のプリロードを行いません。指定した URL からデータを取得するだけです。あなたの場合、データを html ( $details.html(data)) として追加します。ブラウザは、その html に画像があることを認識し、それらを読み込みます。

回避策として、次のいずれかを提案できます。

  1. 代わりに CSS 背景を使用してください (できれば CSS スプライトを使用してください)。
  2. 参照されているすべての画像をプリロードします (これは実用的なソリューションです)
于 2010-05-11T09:34:49.627 に答える