在jQuery Mobile中延遲加載圖像

Question

我試圖在我的jQueryMobile網站中實現Lazy Load插件，以幫助加快包含大量圖像的頁面上的加載時間。

如果我通過直接跳轉到像這樣的網址跳過JQM的ajax頁面加載：http://hello.com/about，延遲加載效果很好。但是，如果我從其他頁面（使用JQM的ajax頁面加載）單擊轉到About頁面，則不會加載Lazy Load。

關於頁面有about一個id =><div data-role="page" data-theme="a" id="about">

我已經嘗試了一些結合，但沒有成功的pageinit功能的變化。我最近的嘗試是：

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

任何指導都很棒。多謝你們。

Answer 1

window.load函數只會觸發一次，並且在通過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); 

文檔：

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

你的代碼上的第一頁視圖工作的原因是因爲您在pageinit綁定到它後window.load事件被解僱事件處理程序，但是在隨後的AJAX加載中，即使它不再觸發，也會綁定到事件window.load。