htmlにajaxをロードしますが、ロードするまでコンテンツを非表示にします。

Question

ユーザーがリンクをクリックしたときにjQueryを使用してコンテンツを動的に読み込みます。コンテンツはちょうど一連の画像で、スライドショー形式で表示されるように設定されています。私の問題は、イメージが完全にロードされた後にのみロードされたコンテンツを表示する方法を見つけることができないということです。私はいくつかのソリューションを試しましたが、それらのスクリプトはすべてスクリプトを壊すか、または私が望むように動作しないようです。ここで私が今使っているコードです：任意の入力をいただければ幸いですhttp://publicprofileproject.com/

：

$(document).ready(function() { 

$("a#item").click(function() { 

    var projectName = $(this).attr('class'); 

    $("div.slideshow").css("display", "block"); 

    $("div.slideshow").load(projectName+".php", function() { 

     var slideshow = new Array(); 

     $("div.slideshow img").each(function() { 
      slideshow.push($(this)); 
     }); 

     startSlideshow(slideshow.shift()); 

     function startSlideshow(image) { 
      image.delay(400).fadeIn(150, function() { 
       if(slideshow.length > 0) {startSlideshow(slideshow.shift());} 
       else { $("div.slideshow").delay(400).fadeOut(200, function() {$("div.slideshow img").css("display", "none")}); } 

      }); 
     } 
    }); 

    return false; 

}); 

}); 

また、ここでは、完全なデモサイトを見ることができます！

Answer 1

JavaScript内にイメージオブジェクトの配列を作成し、各イメージを配列の要素に読み込むことができます。画像のonLoadイベントにイベントハンドラをアタッチします。

イベントハンドラでは、ロードされたイメージの数を増やします。あなたのカウンターがあなたの配列の長さに達すると、ブラウザーはすべての画像を持ちます。これがスライドショーを表示できるポイントです。

ページの読み込みでこれを行うと、ユーザーがあなたのリンクをクリックしたときの準備が整った画像をプリロードするという追加の利点があります。

Answer 2

この質問は既に回答済みです。here

ソースアトリビュートを指定する前にロードイベントハンドラを表示して表示するのが一般的な考えです。

projects+".php"ファイルが既製のhtmlマークアップでイメージを指定している場合、読み込んでいるファイルのイメージの読み込みイベントをキャプチャできるはずです。読み込まれているファイルに次の擬似コードを追加します。

$("img").load(function() { 
    // show the div on the page it is getting loaded into 
    alert("images should be loaded now"); 
}); 

あなたは、元のコードセグメントに配置し、潜在的にlive/on結合事象を使用して、それをバインドすることができるかもしれません。例：load documentationから$("img").on("load", function() {...

：それは、すべてのサブ要素が完全にロードされたとき

負荷イベントが要素に送られます。このイベントはURLに関連付けられた要素（画像、スクリプト、フレーム、iframe、およびウィンドウオブジェクト）に送信できます。

編集：loadイベントの

注意事項を共通の課題の開発者が使用して解決しようとすると、画像

で使用する場合：あなたがやっているように見えるものを行うための興味深い落胆.load（）ショートカットは、イメージ（またはイメージの集合）が完全にロードされたときに関数を実行することです。注意すべきいくつかの既知の警告があります。これらは次のとおりである：

• それはそれはない
• 前の画像SRCが同じSRCに設定されている場合は、WebKitの中で正しく発生しません一貫しても確実にクロスブラウザ
• を動作しません。正しくバブルアップDOMツリー
• は、すでに画像をプリロードするプラグインを見つけ、ブラウザのキャッシュ