Question

我目前正在尝试在我的jQuery Mobile网站中使用Lazy Load XT插件，以减少加载包含大量图片的页面所需的等待时间。

图片位于＆＃39; #mainPage＆＃39;页面是我的默认jQuery Mobile页面。

我使用＆＃39; pageinit＆＃39;从服务器加载图像并将其插入页面，如下所示：

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

这是我的＆＃39; #mainPage＆＃39;页面结构：

   <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>

以下是我用于将图片和相关数据插入＆＃39; #main-content＆＃34;的基本程序：

$.post(imagesDataURL, function(imagesData) {

        /*
        Handled Errors here
        */

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

        }); // End of $.post

）

但问题是，如果我直接转到网址：http://foo.com（＆＃39; #mainPage＆＃39;是显示给访问者的默认页面，＆＃39; #main- content＆＃39;作为＆＃39; #mainPage＆＃39;）中的div，Lazy Loading XT插件不起作用，并且没有显示任何图像，但如果我从任何页面点击进入页面（#mainPage）在网站上，＃mainPage图片延迟加载完美。

我尝试了Lazy Load XT＆＃39;建议的基本使用方法。插件作者，描述于： https://github.com/ressio/lazy-load-xt，即改变＆＃39; src＆＃39; ＆lt; img＆＃39;的属性标记为＆＃39; data-src＆＃39; （），它没有用。

然后我禁用了插件的自动初始化以支持手动初始化，并尝试：

$(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的各种其他变体，都是不成功的（当我直接访问＆＃39; #mainPage＆＃39;页面时它们不起作用，但是当我点击进入＆＃时它们会工作39; #mainPage＆＃39;来自另一个jQuery Mobile页面的页面。）

我真的，非常欣赏它，如果有人可以告诉我如何在用户访问＆＃39; #mainPage＆＃39;页面直接（而不是仅在用户点击或从另一页面点击到＃mainPage＆＃39;页面时延迟加载）。

我在这个问题上花费了8个多小时而没有取得任何进展，现在我完全不知道该怎么做。

Answer 1

在您将图片插入页面后立即致电$(window).lazyLoadXT();，即$('#main-content').append(imagesData);之后。

或者，可以将两个调用合并为单个调用：$('#main-content').append(imagesData).find('img[data-src]').lazyLoadXT();。

完全无法在jQuery Mobile上延迟加载图像

1 个答案: