jQuery fullPage: 所有图片同时加载

Question

我在我的网站上使用 jQuery fullPage，一切看起来都很好。我遇到的问题是所有图像都以 "same time" 加载，使网站的负载约为 23Mb!!!

我尝试阅读 fullPage 的文档，但无法像 "lazy load" 之类的那样加载图像。

全部加载为背景：

<div class="slide" id="slide2" style="background-image:url(produtos/002.jpg)">
</div>

你有什么线索让我可以根据需要加载图像而不是同时加载所有图像吗？

Answer 1

更新

您可以创建一个异步函数来预加载图像，而脚本的其余部分继续运行。

带有背景图片的示例：

<body>
    <div class="container">
        <div class="slide" id="slide1"></div>
        <div class="slide" id="slide2"></div>
        <div class="slide" id="slide3"></div>
        <div class="slide" id="slide4"></div>
        <div class="slide" id="slide5"></div>
        <div class="slide" id="slide6"></div>
    </div>
</body>

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script>
    console.log('Creating images.'); // Will log first
    setTimeout(function() {
        createImages();
        console.log('Image load complete.'); // Will log last
    }, 0);

    function createImages() {
        var n = $('.slide').length;
        for (var i = 1; i <= n; i++) {
            $('#slide'+i).css('background-image', 'url(produtos/00'+i+'.jpg');
        }
    }
    console.log('Continuing script.'); // Will log second
</script>

jQuery 的 setTimeout()，当设置为 0 毫秒时，将模拟一个异步函数，该函数将运行与您的其余部分并行脚本。这样您的页面将立即加载，然后在图像准备就绪时加载它们。上面的示例假定您已按从 001 开始的顺序命名文件。

希望对您有所帮助。

jquery javascript async dom

Answer 2

事情更容易:)

只需使用基于 class fullpage.js 的条件 CSS 添加到您的 body 元素。 (fp-viewing-section-slide)。如果您需要有关它的更多信息，您可以查看 this video 那里有更详细的解释。

例如：

.fp-viewing-secondPage-0 #slide2{
    background-image:url(produtos/002.jpg)
}
.fp-viewing-3rdPage .section{
    background-image:url(produtos/1.jpg)
}

这样背景图片只会在该部分进入视口时加载。

另一种方法是使用 active class 添加到您所在的部分或幻灯片：

#slide2.active{
    background-image:url(produtos/002.jpg)
}
.section.active{
    background-image:url(produtos/1.jpg)
}

或者您甚至可以决定在到达该部分本身（而不是特定幻灯片）时预加载该部分中所有幻灯片的背景，方法是：

.section.active #slide2{
    background-image:url(produtos/2.jpg)
}
.section.active #slide3{
    background-image:url(produtos/3.jpg)
}
.section.active #slide4{
    background-image:url(produtos/4.jpg)
}

jQuery fullPage: 所有图片同时加载

jQuery fullPage: All images loading at same time

javascript

jquery

loading

fullpage.js

display