1

私は自分の Web サイトでjQuery fullPageを使用していますが、すべて問題なく表示されます。私が抱えている問題は、すべての画像が「同時に」ロードされ、Web サイトのロードが約 23Mb になることです!!!

fullPage のドキュメントを読んでみましたが、「遅延読み込み」などのように画像を読み込むことができませんでした。

それらはすべて背景として読み込まれます。

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

同時にすべてではなく、必要に応じて画像を読み込むことができるように、何か手がかりはありますか?

4

2 に答える 2

1

物事はより簡単です:)

クラス fullpage.js に基づいて条件付き CSS を使用するだけで、body要素に追加されます。( fp-viewing-section-slide)。詳細が必要な場合は、こちらのビデオで詳細を説明しています。

例えば：

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

この方法では、セクションがビューポートに入ったときにのみ背景画像が読み込まれます。

もう 1 つの方法は、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)
}
于 2016-01-19T10:48:16.620 に答える
-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 から順番に名前を付けたと仮定しています。

これが役立つことを願っています。

于 2016-01-18T19:52:14.820 に答える