1

I use jQuery fullPage on my website, and everything looks just fine. The problem I'm having is that all images are loaded at "same time" making the website's load to be around 23Mb!!!

I tried reading fullPage's documentation, but couldn't make images load like "lazy load" or something.

All of them are loaded as a background:

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

Do you have any clue so I can load images as needed and not all at the same time?

4

2 回答 2

1

Things are easier :)

Just use conditional CSS based on the class fullpage.js adds to your body element. (fp-viewing-section-slide). If you need more information about it you can check this video where it is explained with more detail.

For example:

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

This way the background image will only be loaded when the section enters in the viewport.

Another way of doing it is by using the active class added to the section or slide you are in:

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

Or you can even decide to preload the backgruonds of all the slides within a section when arriving to the section itself (rather than to the specific slide) by doing this:

.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

Update

You can create an asynchronous function which preloads images while the rest of your script continues to run.

Example with background images:

<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's setTimeout(), when set to 0 milliseconds, will emulate an asynchronous function that will run parallel to the rest of your script. This way your page will load immediately and then load images as they're ready. The above example assumes you've named your files in order starting at 001.

I hope this helps.

于 2016-01-18T19:52:14.820 回答