無法在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到圖像。