为CSS行的简单Javascript选项预加载图像和转换 [英] Preloading images and transition for my simple Javascript option for CSS row
问题描述
这是我的第一个问题，我真的陷入了困境。
如果我打破未知的礼节，我会提前道歉。
我有一个问题，我需要用旋转背景填充响应div行的背景预加载的图像以及图像之间的平滑过渡。我通过CSS来控制COVER设置。
我有一个粗糙的，但工作js示例..但没有预加载和没有平滑过渡。请告知我如何通过平稳过渡完成预加载 -
CSS：
.row-bkg
background-size：cover！important;
背景重复：不重复;
-webkit-background-size：cover;
-moz-background-size：cover;
-o-background-size：cover;
Javascript：
（这个工作非常简单，我需要一个软转换（$）
$ $ $ $ $ $ $ $ $ $ $ $ $ $ $变量头= jQuery（'。row-bkg'） ;
var backgrounds = new Array（
'url（images / banner.jpg）'，
'url（images / banner2.jpg）'
）;
var current = 0;
function nextBackground（）{
header.css（'background'，backgrounds [current = ++ current％backgrounds.length]）;
setTimeout（nextBackground，6000）;
}
setTimeout（nextBackground，6000）;
header.css（'background'，backgrounds [0]）;
}）;
上面的工作粗略地重复了一遍..我只是需要它在标语间轻轻地淡入淡出，它不会显示每次下载图像。
有关如何调整此Javascript以使其执行此操作的任何想法？也许有人可以推荐一个可以使用的脚本，它允许我通过CSS设置细节？
感谢您的时间。
btw ..这是它只能在我现有的响应代码中执行的地方。
< div class =row row-bkg>我将自定义css添加到现有的响应式css中。
然而，如果你想要一个图像的话，不可能顺利地转换背景图像。平滑淡入/淡出---你必须在你的html中使用不同的方法：
< header> ;
< img>
< img>
< img>
< / header>
其中，巧合地解决了您的预加载问题...
然后，你将它们的样式放在彼此之上，并且做这样的事情：
$ b
$（function（）{
var current = 0;
var zindex = parseInt（ - + $（header> img）。length）;
<$ p $ （函数（i））{
$（this）.css（z-index， - + i）; $（$ header） b {b}}
函数nextBackground（）{
$（header img：nth-child（+（current ++）+））。animate（{opacity：0} ，
400，
function（）{
$（this）.css（{
z-index：zindex，
opacity：1
}）;
$（header> img）。each（function（）{
$（this） .css（z-index，parseInt（$（this）.css（z-index））+ 1）;
}）;
// current ++ ;
if（current> $（header> img）。length）{
current = 0;
setTimeout（nextBackground，1000）;
}
setTimeout （nextBackground，1000）;
}）;
^类似的东西^应该可以工作
这里是一个JSFiddle：
现在，我们应该回顾一下这个机制的细节吗？
400中存在动画持续时间，btw -
所有正在发生的事情，您隐藏图像，然后将它移动到堆栈的后面......这发生在动画中，当动画完成时，它将不透明度重置为1，并将zindex设置为需要去的最低值 -
然后，它为每个z-index添加1，以便它们都向前移动一个槽，为下一个移动回来留出空间 - 这样，他们无缝循环。
无论您在那里粘贴多少图片，此代码都可以扩展...
有什么问题吗？
^ _ ^
This is my first question here, and I'm really in a jam. I apologize in advance if I am breaking unknown etiquette.
I have an issue where I need to fill the background of a responsive div row with a rotating background image that preloads and also has smooth transitions between images. I'm controlling the COVER setting via the CSS.
I have a crude, but working js sample.. but NO preload and NO smooth transitions. Please advise how I can accomplish preloading with smooth transitions-
The CSS:
.row-bkg
background-size: cover !important;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
The Javascript: ( This works but is very basic. I need one with soft transitions that preloads images )
$(function() {
var header = jQuery('.row-bkg');
var backgrounds = new Array(
'url(images/banner.jpg)',
'url(images/banner2.jpg)'
);
var current = 0;
function nextBackground() {
header.css('background',backgrounds[current = ++current % backgrounds.length]);
setTimeout(nextBackground, 6000);
}
setTimeout(nextBackground, 6000);
header.css('background', backgrounds[0]);
});
Again the above works crudely.. I just need it to gently fade between banners and preload the images so it doesn't show the image download each time.
Any ideas on how to tweak this Javascript to make it do that? Maybe someone can recommend a script that can be used instead that allows me to set details via CSS?
Thanks in advance for your time.
btw.. this is where it can only go in my existing responsive code. I'm adding a custom.css to existing responsive css.
<div class="row row-bkg">
You are very much on the right track...
However, there is not going to be a way to smoothly transition the background image -- if you want a smooth fade in/ fade out --- you'll have to go with a different approach in your html:
<header>
<img>
<img>
<img>
</header>
Which, coincidentally solves your pre-loading issue...
Then, you'll style them so that they are stacked on top of eachother, and do something like this:
$(function() { var current = 0; var zindex = parseInt("-" + $("header > img").length);
$("header > img").each(function(i) {
$(this).css("z-index", "-" + i);
})
function nextBackground() {
$("header img:nth-child(" + (current++) + ")").animate({"opacity": "0"},
400,
function() {
$(this).css({
"z-index" : zindex,
"opacity" : "1"
});
});
$("header > img").each(function() {
$(this).css("z-index", parseInt($(this).css("z-index")) + 1);
});
// current++; if( current > $("header > img").length){ current = 0; } setTimeout(nextBackground, 1000);
}
setTimeout(nextBackground, 1000);
});
^Something like that^ ought to work
Here it is in a JSFiddle:
Now, shall we go over the details of the mechanics of this?
that 400 in there is the animation duration, btw --
All that is happening, you are hiding the image, and then moving it to the very back of the stack... this happens in the animation, and when the animation is done, it resets the opacity back to 1, and sets the zindex to the lowest it needs to go -
Then, it adds 1 to each z-index, so that they all move forward a slot, to make room for the next one that gets moved back - this way, they cycle through, seamlessly.
This code will scale, no matter how many images you stick in there...
Any questions? ^_^
这篇关于为CSS行的简单Javascript选项预加载图像和转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
