レイジー画像をjQuery Mobile内にロードする

Question

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

私がJQMのajaxページロードをバイパスする場合、次のようなURLに直接行く：http://hello.com/about、遅延読み込みがうまくいきます。しかし、JQMのajaxページローディングを使用する別のページからAboutページをクリックすると、Lazy Loadがロードされません。ページについて

ザ・私は成功しませんpageinit機能への結合のバリエーションの数を試したabout =><div data-role="page" data-theme="a" id="about">

のIDを持っています。私の最新の試みは次のとおりです：

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

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

Answer 1

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火災後まで発生しませんので、うまく動作するはずです。

また、.live()の代わりに.delegate()を使用しました。.live()が償却され、将来のリリースから削除される可能性があるためです。上記の機能の両方が実際に.on()にマッピングし、あなたがそうのような委任マナーで.on()を使用することができ、jQueryの1.7のように、

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

そして、ボーナスラウンドのため：

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

は同じです：

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

ドキュメント：

• .live()：http://api.jquery.com/live
• .delegate()：http://api.jquery.com/delegate
• .on()：http://api.jquery.com/on

あなたのコードは最初のページビューで働いた理由あなたはpageinitでそれに結合された後window.loadイベントが発火したためでした後でAJAXのロード時には、もはや起動しなくてもwindow.loadイベントにバインドしています。