2

ユーザーがリンクをクリックしたときにコンテンツを動的にロードするために jQuery を使用しています。コンテンツは、ある種のスライドショーで表示するように設定された一連の画像です。私の問題は、画像が完全にロードされた後にのみ、ロードされたコンテンツを表示する方法がわからないことです。私はいくつかの異なる解決策を試しましたが、それらはすべてスクリプトを壊しているか、思い通りに機能していないようです。これが私が今使っているコードです：

$(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;

});

});

完全なデモ サイトもここで見ることができます: http://publicprofileproject.com/

どんな入力でも大歓迎です！

4

2 に答える 2

2

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

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

ページの読み込み時にこれを行うと、ユーザーがリンクをクリックしたときに備えて画像を事前に読み込むという利点が追加されます。

于 2012-04-24T19:11:15.913 に答える
1

この質問はすでにここで回答されていると思います。

一般的な考え方は、ソース属性を指定する前に、ロードイベントハンドラーを指定して表示することです。

または、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バインディングイベントを使用してバインドできる可能性があります。元：$("img").on("load", function() {...

ロードドキュメントから：

ロードイベントは、要素とすべてのサブ要素が完全にロードされたときに要素に送信されます。このイベントは、URLに関連付けられている任意の要素（画像、スクリプト、フレーム、iframe、ウィンドウオブジェクト）に送信できます。

編集：あなたがしているように見えることをすることに対する興味深い落胆：

画像で使用する場合のロードイベントの警告

開発者が.load（）ショートカットを使用して解決しようとする一般的な課題は、画像（または画像のコレクション）が完全に読み込まれたときに関数を実行することです。これには、注意すべきいくつかの既知の警告があります。これらは：

  • 一貫して動作せず、クロスブラウザでも確実に動作しません
  • 画像のsrcが以前と同じsrcに設定されている場合、WebKitでは正しく起動しません
  • DOMツリーを正しくバブルアップしません
  • ブラウザのキャッシュにすでに存在する画像の起動を停止できます
于 2012-04-24T19:11:26.193 に答える