5

大量の画像を含むページの読み込み時間を短縮するために、jQueryMobile サイトにLazy Loadプラグインを実装しようとしています。

次のように URL に直接アクセスして JQM の ajax ページ読み込みをバイパスするとhttp://hello.com/about、遅延読み込みがうまく機能します。ただし、JQM の ajax ページ読み込みを利用する別のページから About ページをクリックすると、Lazy Load が読み込まれません。

About ページの ID はabout=><div data-role="page" data-theme="a" id="about">

関数へのバインドのさまざまなバリエーションを試しましたが、pageinit成功しませんでした。私の最近の試みは：

$('#about').live('pageinit', function() {
    $(window).load(function() {
        $("img.lazy").lazyload();
    });
});

これに関するガイダンスは素晴らしいでしょう。みんなありがとう。

4

1 に答える 1

7

このwindow.load関数は 1 回だけ起動し、ページが AJAX 経由で DOM に取り込まれたときに起動した後にバインドします。問題の解決策は非常に簡単です。特定のページが初期化されたときにコードを実行します。

$(document).delegate('#about', 'pageinit', function() {

    //notice I start the selection with the current page,
    //this way you only run the code on images on this pseudo-page
    $(this).find("img.lazy").lazyload();
});

pageinit発火後まで発火しないため、これは問題なく機能するはずdocument.readyです。

また、以降.delegate()の代わりに使用したことにも注意してください。.live().live()

$(SELECTION).live(EVENT, EVENT-HANDLER);

以下と同じです:

$(document).delegate(SELECTION, EVENT, EVENT-HANDLER);

ボーナス ラウンドでは、jQuery 1.7 の時点で、上記の関数の両方が実際にマップされ、委任されたマナーで次のように.on()使用できます。.on()

$(document).on(EVENT, SELECTION, EVENT-HANDLER);

ドキュメンテーション：

コードが最初のページビューで機能した理由はwindow.load、イベントハンドラーでイベントにバインドした後にイベントが発生したためですpageinitが、その後の AJAX ロードでは、window.loadイベントが発生しなくてもイベントにバインドしています。

于 2012-04-19T21:18:34.240 に答える