如何一次加载所有背景图片 [英] 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/
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> ，并删除它们加载的容器页面已满载：
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();
});
});
#deposit 内部标记或动态添加：
The #deposit element could either be placed inside the markup or added dynamically :
$('body').append('<div id="deposit"></div>');
这篇关于如何一次加载所有背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
