Question

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

我尝试过阅读fullPage的文档，但无法使图片加载像＃la; lazy load＆＃34;什么的。

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

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

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

另一种方法是使用添加到您所在的部分或幻灯片中的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)
}

Answer 2

<强>更新

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

背景图片示例：

<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

jQuery fullPage：所有图像同时加载

2 个答案: