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

对于缓存背景图片，我通常采用这种方法将它们作为indexFunction = @(r,c) A(r,c); result = cell2mat(arrayfun(indexFunction,RandomIndex,1:N,'UniformOutput',false));从屏幕上预加载，并在页面完全加载时删除它们已加载的容器：

<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

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

2 个答案: