javascript - jQuery fullPage : All images loading at same time

Question

我使用jQuery fullPage在我的网站上，一切看起来都很好。我遇到的问题是所有图像都是“同时”加载的，导致网站的负载约为 23Mb!!!

我尝试阅读 fullPage 的文档，但无法使图像像“延迟加载”或其他内容一样加载。

所有这些都作为背景加载:

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

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

Answer 1

事情变得更容易了:)

只需使用基于类 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)
}

这样，只有当该部分进入视口(viewport)时才会加载背景图像。

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

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