完全无法在 jQuery 移动设备上延迟加载图像

Question

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

图片位于“#mainPage”页面，这是我的默认 jQuery 移动页面。

我使用'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”是a div within '#mainPage'), Lazy Loading XT 插件不起作用并且显示了 none 的图像，但是如果我从任何页面点击进入页面 (#mainPage)该网站，#mainPage 图片延迟加载完美。

我尝试了'Lazy Load 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”页面时它们不起作用，但当我从另一个页面点击进入“#mainPage”页面时它们确实起作用jQuery 移动页面）。

我真的，真的如果有人能告诉我如何在用户直接访问“#mainPage”页面（而不是懒惰）时让图像延迟加载，我将不胜感激仅在用户点击或从另一个页面点击进入“#mainPage”页面时加载）。

过去 8 个多小时我都在这个问题上没有取得任何进展，现在我完全不知所措。

Answer 1

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

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

完全无法在 jQuery 移动设备上延迟加载图像

Completely unable to lazy load images on jQuery Mobile

jquery

lazy-loading

jquery-mobile