如何一次加载所有背景图片

Question

我有第一个网站页面，它有很少的背景图像，它们是淡入淡出的。

所以，问题是当页面最初没有缓存在计算机上时，需要一些时间才能加载下一个背景图像以实现交叉淡化效果。

知道如何一次加载所有图像吗？

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>

Answer 1

您可以在 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

更新：您可以通过 .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

Answer 2

为了缓存背景图像，我通常采用将它们预加载到屏幕外的方法 <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>');

如何一次加载所有背景图片

How to load all background images at one time

html

css

background-image