How to load all background images at one time

I have first website page and it have few background images, which are crossfading.

So, the problem is that when page are not cached at computer at first, it's took some time to load next background image on crossfading effect.

Any ideas how to load all images at once?

JSFiddle: https://jsfiddle.net/sawqo6j9/

var i=0;
var imghead=[
	"url(http://www.psdgraphics.com/file/abstract-mosaic-background.png)",
	"url(http://www.psdgraphics.com/file/colorful-triangles-background.jpg)",
	"url(http://www.mrwallpaper.com/wallpapers/gradient-background.jpg)"
	];

function slideimg() {
    setTimeout(function () {
        jQuery('body').css('background-image', imghead[i]);
        i++;
        if(i==imghead.length) i=0;
        slideimg();
    }, 6000);
}
slideimg();

html, body {
     height: 100%;
} 

body {
     background: url(http://www.psdgraphics.com/file/abstract-mosaic-background.png) no-repeat center center fixed;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
     background-size: auto 100%;
    -webkit-transition: all 2s ease-in;
    -moz-transition: all 2s ease-in;
    -o-transition: all 2s ease-in;
    -ms-transition: all 2s ease-in;
     transition: all 2s ease-in;
     margin: 0;
     padding: 0;
    font-family: Arial;
    font-size: 14px;
    color: #fff;
    margin: 100px;
}

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>
    <p>There goes page content</p>
  </body>
</html>

For caching background images, I usually take the approach to preload them off screen as <img> and remove the container they're loaded in when the page has fully loaded :

#deposit {
  position: fixed;
  top: 100%;
}

$(function() {

var imghead = [
    "//www.psdgraphics.com/file/abstract-mosaic-background.png",
    "//www.psdgraphics.com/file/colorful-triangles-background.jpg",
    "//www.mrwallpaper.com/wallpapers/gradient-background.jpg"
    ];

$.each(imghead, function() {

    $('#deposit').append('<img src="' + this + '" alt="">');
});

$(window).on('load', function() {

    $('#deposit').remove();
});
});

The #deposit element could either be placed inside the markup or added dynamically :

$('body').append('<div id="deposit"></div>');

You could define them in preload containers in your CSS.

#preload-01 { background: url("http://www.psdgraphics.com/file/abstract-mosaic-background.png") no-repeat -9999px -9999px; }
#preload-02 { background: url("http://www.psdgraphics.com/file/colorful-triangles-background.jpg") no-repeat -9999px -9999px; }
#preload-03 { background: url("http://www.mrwallpaper.com/wallpapers/gradient-background.jpg") no-repeat -9999px -9999px; }

And just add them to your HTML.

Fiddle

UPDATE: You could add them as images and remove them once they are loaded, via a .load() function.

var i=0;
var imghead=[
    "http://www.psdgraphics.com/file/abstract-mosaic-background.png",
    "http://www.psdgraphics.com/file/colorful-triangles-background.jpg",
    "http://www.mrwallpaper.com/wallpapers/gradient-background.jpg"
];

$(imghead).each(function(key,val){
    $('body').append('<img class="preloader" src="'+val+'">');
    $('.preloader').load(function(){
        $(this).remove();
    });
});

function slideimg() {
    setTimeout(function () {
        jQuery('body').css('background-image', 'url('+imghead[i]+')');
        i++;
        if(i==imghead.length) i=0;
        slideimg();
    }, 6000);
}
slideimg();

Fiddle

来源：https://stackoverflow.com/questions/33474384/how-to-load-all-background-images-at-one-time

标签

html

css

background-image