0

私がjQueryで抱えている状況があります。特にその prettyPhoto ライブラリと getJSON 関数。

HTML を読み込むページがあり、jQuery と prettyPhoto を呼び出します。ページのさらに下に JSON リクエストを作成するインライン JS がいくつかあります。

以下のように動作するはずです。

1) ページの読み込み、

2) Javascript コードの実行、

3）スクリプトは、HTML（各aタグ内のaタグと画像）を返し、内部に持つjQuery JSONリクエストを実行します。

4) スクリプトは、JSON 内の HTML を画面に出力します。

5) ユーザーがタグ/画像をクリックすると、prettyPhoto の iframe ポップアップで開きます。

注 -> 各 a-tag には prettyPhoto id が添付されています (iframe ポップアップを使用して prettyPhoto に画像をロードするため)。

問題は、画像 (a-links) が prettyPhoto で開かないことです。その理由はわかりません。JS エラーはありません。

ただし、手動で HTML (a-links/image) が既に存在する場合は機能します (そのため、JSON リクエストから HTML をロードするだけで違いが生じるようです)。

JSON リクエストが (HTML を使用して) 戻るまでに、prettyphoto は既に a-tags にバインドされている (または欠落している) ようです。

これまでにテスト済み:

JSONリクエストを「document.ready」に、prettyPhotoを「window.load」に入れてみました。JSON リクエストも早い段階で行われ、他のすべてが読み込まれると prettyPhoto がバインドされます - 失敗しました

JSON の代わりに jQuery AJAX を使用してみました - 失敗しました

特にコードは必要ありませんが、ロジックに問題があります。

4

1 に答える 1

1

JSON (a-links/images) からの HTML が (「window.load」が実行される前に) 十分な速さで返されないように思えます。

prettyPhoto JS を成功のコールバック (つまり、データを返す場所) に入れてみてください。

以下の load_images.json は、HTML (a-link とその画像) を返す JSON リクエストです。

$.getJSON("load_html.json", function() {
    //grab HTML data (images/a-links) from json file and print into page
})
.success(function() { 
    //JS code running prettyPhoto inside here. Now will bind to a-links.
});

JSON が A リンクをロードした後、PrettyPhoto が A リンクにバインドするようになりました。

願わくば、a-link の後に prettyPhoto のものを用意するのに役立つことを願っています。

それが失敗した場合は、成功のコールバックの後に発生する完全なコールバック内に prettyPhoto コードを入れてみてください。以下のように:

$.getJSON("load_html.json", function() {
    //grab HTML data (images/a-links) from json file and print into page
})
.success(function() { 
    //nothing
})
.complete(function() {
     //JS code running prettyPhoto inside here. Now will bind to a-links.
});

このようにして、prettyPhoto がマークされた正しい a-link にバインドするための十分な時間を与えます。

それを試してみてください。

于 2013-01-20T14:50:02.653 に答える