我有第一个网站页面，它的背景图像很少，而且会交叉淡化。
因此，问题在于，当页面最初没有在计算机上缓存时，花了一些时间来加载下一张背景图像以产生交叉淡化效果。
有什么想法如何一次加载所有图像吗？
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>为了缓存背景图片，我通常采用以下方法将其预加载为屏幕外的内容，<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>');
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句