懶加載圖像fullpage js

我正在使用fullpage.js爲一個網站，並希望知道每個幻燈片中的圖像只有當該人在該幻燈片上加載，以減少頁面加載時間。全頁帶有此回調，這將觸發對幻燈片負載懶加載圖像fullpage js

afterSlideLoad: function(slideIndex, index){}

所以基本上我的計劃是使用一個佔位符圖像，並切換出src和HREF與數據屬性頁面加載時。該腳本似乎工作正常，但是當我加載頁面並使用chrome檢查器時，即使腳本沒有被觸發，圖像仍然被加載到頁面上，當不在該頁面上時。

<a href="" data-lightbox="golf-1" data-title="Test"><img src="img/loading.gif" alt="" data-echo="img/res/golf/1-1.jpg" class="animateHidden"></a> 

afterSlideLoad: function(slideIndex, index){ 
    $(this).find("img").each(function() { 
     var orginalImg = $(this).attr('data-echo'); 
     $(this).attr("src", orginalImg); 
     $(this).parent().attr('href', orginalImg); 
    }); 
}

來源

2015-06-01 Packy

此代碼無效。我注意到在開發工具中，圖像是從一箇舊的js文件中調用的，我已經預先加載了圖像。一旦我擺脫了，這工作得很好。

來源

2015-06-01 21:25:42 Packy

fullPage.js在其最新版本（此刻爲2.6.6）中提供了延遲加載選項。

Check it out

來源

2015-06-19 13:23:24 Alvaro

懶加載圖像fullpage js

回答

相關問題