完全無法在jQuery Mobile上延遲加載圖像

Question

我目前正在嘗試在jQuery Mobile網站中使用Lazy Load XT插件，以減少加載包含很多圖像的頁面所需的等待時間。

圖像位於“ #mainPage”頁面上，這是我的默認jQuery Mobile頁面。

我使用'pageinit'從服務器加載圖像並將其插入頁面，如下所示：

$(document).on("pageinit", "#mainPage", function() { loadMain(); // Function retrieves images via ajax & inserts them into the '#main-content' div which is a <div> within '#mainPage'
});

這是我的“ #mainPage”頁面結構：

   <div data-role="page" id="mainPage">

    <div data-role="header" data-position="fixed" data-tap-toggle="false">
    <h1>Main Page</h1>
    </div>

    <div data-data-role="main" class="ui-content">
        <div class="imagesContent masonry" id="main-content">
        </div>

        <a class="ui-btn ui-corner-all" href="#" id="more">More</a>
    </div>

</div>

這是我用來將圖像和相關數據插入“＃main-content”的基本過程：

$.post(imagesDataURL, function(imagesData) {

        /*
        Handled Errors here
        */

        $('#main-content').append(imagesData); 
        hideLoading(); // Hide the Loading spinner

        }); // End of $.post

）

但是我的問題是，如果我直接轉到URL： http : //foo.com （“ #mainPage”是顯示給訪問者的默認頁面，“＃main-content”是“ #mainPage”中的div ），延遲加載XT插件不工作，沒有任何圖像顯示，但如果我的點擊頁面（#mainPage）從任何網頁的網站上，該#mainPage圖像延遲加載完美 。

我嘗試了“延遲加載XT”插件作者建議的基本用法，該方法在https://github.com/ressio/lazy-load-xt上進行了描述，即將“ img”標簽的“ src”屬性更改為'data-src'（），它不起作用。

然后，我禁用了插件的自動初始化，而傾向於手動初始化，並嘗試：

$(document).on("pageshow", "#mainPage", function() {
$(this).find("img[data-src]").lazyLoadXT();
});

這沒有用，所以我嘗試了：

$(document).on("pageinit", "#mainPage", function() {
$(this).find("img[data-src]").lazyLoadXT();
});

這也沒有用，所以最后我嘗試了：

$(window).on('pageshow',  function() {
$(window).lazyLoadXT();
});

以及上述3的其他各種變體都沒有成功（當我直接訪問“ #mainPage”頁面時它們不起作用，但是當我從另一個jQuery Mobile頁面單擊到“ #mainPage”頁面時它們卻起作用了）。

我真的， 真的很感激，如果有人可以告訴我怎么當用戶直接訪問該“#mainPage頁面來獲得圖像延遲加載（而不是只有當用戶點擊或通過水龍頭向“#mainPage延遲加載'頁到另一頁）。

在此問題上，我花了過去8多個小時的時間，但並沒有絲毫進展，而現在我對於該做什么完全不知所措。

Answer 1

調用$(window).lazyLoadXT(); 在您將圖片插入頁面之后，即在$('#main-content').append(imagesData); 。

另外，也可以將兩個調用合並為一個： $('#main-content').append(imagesData).find('img[data-src]').lazyLoadXT(); 。