无法在jQuery Mobile应用程序中延迟加载图像（当前使用LazyLoadXT）

Question

我在使用Lazy Load XT v1.0.6在我的jQM应用程序中实现延迟加载功能时遇到了困难。

我发现当我向下滚动图像时没有显示，但是当我切换到浏览器中的其他选项卡然后切换回来时，图像就在那里。我认为这可能是Firefox的一个奇怪的怪癖，但是在最新版本的Firefox和Chrome上都会出现这种情况。

<img src="/img/default-img.jpg" data-src="/img/product/1872.jpg" class="product_image" width="200" height="300">

这里发生了什么？ pageinit是此代码的正确事件吗？

我正在使用jQuery Mobile v1.3.1。

当用户向下滚动时，这是我用来尝试延迟加载图像的代码。

$(document).on('pageinit', function (event, ui) {
    var page = $(event.target);
    page.find(".container .product_image").lazyLoadXT();
});

我已经尝试了一些插件，但收效甚微，所以如果还有其他方法，请大声说。

Answer 1

您可以尝试lazySizes。该脚本会自动检测新元素和可见性更改。所以你不需要编写任何JS代码。您只需添加脚本并将data-src属性以及类lazyload添加到图片中。