Question

我正在为网站使用fullpage.js，并希望知道每个幻灯片中的图片仅在该人在幻灯片上时加载以减少页面加载时间。 Fullpage附带此回调将在幻灯片加载

上触发

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);
     });
}

Answer 1

fullPage.js在其最新版本（目前为2.6.6）中提供了一个延迟加载选项。

Check it out

Answer 2

此代码确实有效。我注意到在开发工具中，图像是从我预加载图像的旧js文件调用的。一旦我摆脱了这个工作就好了。

延迟加载图片整页js

2 个答案: