在jQuery中setInterval（）函数调用中的背景图像css animate（） [英] Background image css animate() within setInterval() function call in JQuery

问题描述

我注意到一个我不能解释的行为。我确信它必须是我对JQuery / JavaScript的有限的知识。

当我在我的网页上运行以下代码时，一切都如预期 - 背景图像旋转：

  // background image rotator 
 var imgArr = new Array（'/ images / 1.jpg'，' images / 2.jpg'，'/images/3.jpg'）; 
 var preloadArr = new Array（）; 
 var i; 
 
 / * preload images * / 
 for（i = 0; i  preloadArr [i] = new Image 
 preloadArr [i] .src = imgArr [i]; 
} 
 
 var currImg = 1; 
 var intID = setInterval（changeImg，5000）; 
 
 function changeImg（）{
 $（'＃homeDiv'）。css（{'background'：'url（'+ preloadArr [currImg ++％preloadArr.length] .src +'） '}）;但是，如果我用 .css（）替换 
  


$ b < .animate（）的功能，像下面的代码一样， currImg ++ 增加2和不正确的图像加载。

  //背景图像旋转器
 var imgArr = new Array images / 1.jpg'，'/images/2.jpg'，'/images/3.jpg'）; 
 var preloadArr = new Array（）; 
 var i; 
 
 / * preload images * / 
 for（i = 0; i  preloadArr [i] = new Image 
 preloadArr [i] .src = imgArr [i]; 
} 
 
 var currImg = 1; 
 var intID = setInterval（changeImg，5000）; 
 
 function changeImg（）{
 $（'＃homeDiv'）。animate（{'background'：'url（'+ preloadArr [currImg ++％preloadArr.length] .src +'） '}，1000）; 
} 
  

是因为 setInterval animate（）函数需要1000ms？

/ p>

Alex

解决方案

删除setInterval， p>

  function changeImg（）{
 $（'＃homeDiv'）。delay（5000）.animate（{'background' ：'url（'+ preloadArr [currImg ++％preloadArr.length] .src +'）'}，1000，function（）{changeImg（）;}）;就像你说的，setInterval获取与animate函数的异步。
} 
  

$ b <这里chaneImg再次运行自身作为回调函数每次它完成执行本身。

I have noticed a behaviour that I can't explain. I'm sure it must be my limited knowledge of JQuery/JavaScript.

When I run the following code on my webpage, everything works as expected - the background image rotates:

//background image rotator
var imgArr = new Array('/images/1.jpg', '/images/2.jpg', '/images/3.jpg');
var preloadArr = new Array();
var i;

/* preload images */
for (i = 0; i < imgArr.length; i++) {
    preloadArr[i] = new Image();
    preloadArr[i].src = imgArr[i];
}

var currImg = 1;
var intID = setInterval(changeImg, 5000);

function changeImg() {
    $('#homeDiv').css({ 'background': 'url(' +  preloadArr[currImg++ % preloadArr.length].src + ')' });
}

However, if I replace the .css() function with .animate(), like in the following code, the currImg++ seems to increment by 2 and an incorrect image loads.

//background image rotator
var imgArr = new Array('/images/1.jpg', '/images/2.jpg', '/images/3.jpg');
var preloadArr = new Array();
var i;

/* preload images */
for (i = 0; i < imgArr.length; i++) {
    preloadArr[i] = new Image();
    preloadArr[i].src = imgArr[i];
}

var currImg = 1;
var intID = setInterval(changeImg, 5000);

function changeImg() {
    $('#homeDiv').animate({ 'background': 'url(' +  preloadArr[currImg++ % preloadArr.length].src + ')' }, 1000);
}

Is it due to the setInterval process getting 'out of sync' due to the animate() function taking 1000ms?

Thanks

Alex

解决方案

Remove the setInterval and write code like this

function changeImg() {
$('#homeDiv').delay(5000).animate({ 'background': 'url(' +  preloadArr[currImg++ % preloadArr.length].src + ')' }, 1000, function() { changeImg();} );
}

Like you said, setInterval gets asynchronous with animate function. Here chaneImg runs itself again as callback function everytime it's done executing itself.

这篇关于在jQuery中setInterval（）函数调用中的背景图像css animate（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！