Title: jQuery fullPage: All images loading at same time
Tags: javascript;jquery;loading;fullpage.js;display
Question: 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)"&gt;
</div&gt;
Do you have any clue so I can load images as needed and not all at the same time?
Comment: How about this? https://github.com/alvarotrigo/fullPage.js#lazy-loading

Comment: Refer to: [http://stackoverflow.com/questions/3646036/javascript-preloading-images](http://stackoverflow.com/questions/3646036/javascript-preloading-images)

Here is the accepted answer: 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)

Here is another answer: Update
You can create an asynchronous function which preloads images while the rest of your script continues to run.
Example with background images:
<body&gt;
<div class="container"&gt;
<div class="slide" id="slide1"&gt;</div&gt;
<div class="slide" id="slide2"&gt;</div&gt;
<div class="slide" id="slide3"&gt;</div&gt;
<div class="slide" id="slide4"&gt;</div&gt;
<div class="slide" id="slide5"&gt;</div&gt;
<div class="slide" id="slide6"&gt;</div&gt;
</div&gt;
</body&gt;
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"&gt;</script&gt;
<script&gt;
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&gt;
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 ivanacosta@example.com.
I hope this helps.
jqueryjavascriptasyncdom

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2016:00:01/18/16', 'FavoriteCount': 1.0, 'PostTypeId': 1, 'Tags': '<javascript><jquery><loading><fullpage.js><display>', 'Title': 'jQuery fullPage: All images loading at same time', 'ViewCount': 906, 'id': 34861980, 'user_AboutMe': "<p>BY DAY: Image editor and crazy photoshopper for Walmart.com Brazil.</p>\n\n<p>BY NIGHT: I see dead people and code when no one's looking.</p>\n\n<p>EVERYDAYS: I'm a writer that became a photographer that became something else. Therefore I'm a becomer.</p>\n", 'user_AccountId': 432494.0, 'user_DisplayName': 'OleSchmitt', 'user_Reputation': 165.0, 'user_Views': 27.0, 'user_id': 817293.0}}