All geek questions in one place

How to download all background images in one go

I have the front page of a website and it has few background images that are crossfades.

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

Any ideas how to download all the 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>
Run codeHide result
+4
source share
2 answers

, <img> , , :

#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();
});
});

#deposit :

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

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; }

HTML.

Fiddle

UPDATE: .load().

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

+2

Source: https://habr.com/ru/post/1614120/

More articles:


All Articles