代码之家 › 专栏 › 技术社区 › OleSchmitt

jQuery fullPage:同时加载所有图像

display fullpage.js loading jquery javascript

OleSchmitt · 技术社区 · 9 年前

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

我尝试阅读fullPage的文档,但无法像“懒惰加载”之类的加载图像。

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

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

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

2 回复 | 直到 9 年前

Alvaro 9 年前

事情更容易:)

只需使用基于类全页的条件CSS。js添加到您的 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)
}

-1

putipong 9 年前

使现代化

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

背景图像示例:

<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的 设置超时() ,当设置为0毫秒时,将模拟与脚本其余部分并行运行的异步函数。这样,您的页面将立即加载,然后在图像准备就绪时加载图像。上面的示例假设您已经按照从001开始的顺序命名了文件。

我希望这有帮助。

jquery javascript async dom