Firefox의 Jquery 애니메이션 속도

Question

저는 각 이미지에 대해 10 개의 슬라이스를 만들고 해당 슬라이스에 애니메이션을 적용하는 슬라이드 쇼를 가지고 있습니다. 즉, 오페라, 크롬은 애니메이션을 잘 실행하지만 파이어 폭스에서는 애니메이션이 너무 느리고 다른 컴퓨터로 시도해 보았습니다. 10 개의 새 div를 만들고 각 div는 다른 배경 위치 속성을 갖는 "for"루프로 슬라이스를 만듭니다. 파이어 폭스를 어떻게 해결할 수 있습니까? 감사.

내가 어떤 코드

//part of creating slices 

for(imageN=0;imageN<imageCount;imageN++) 
{ 
$('#image').append("<div name=slices class=slices></div>"); 
slicesCreate(imageN); 
} 

//#image is main div contains slice divs. 

//Here is sliceCreate function 
/*In this function, it takes how many images added to slideshow, takes all 
sources for each image and creates slices*/ 
function slicesCreate(imageN) 
{ 
var i = 0; 
var nleft = 0; 
var image= $("#image img:eq("+imageN+")").attr("src"); 

    for(i=0;i<10;i++) 

     { 

    $('.slices:eq('+imageN+')').append("<div name=slice"+i+" class=slice></div>"); 
$(".slices:eq("+imageN+") .slice[name=slice"+i+"]").css({ 
    backgroundImage: "url("+image+")", 
    backgroundPosition: nleft + "px 0px", 
    backgroundRepeat: "no-repeat", 
    backgroundSize: twidth 
    }); 

    /*sliceCount is a global variable that calculated when page loaded for display 
    resolution*/ 
    nleft -=sliceCount; 

     } 

    } 


/* And here is one of the animation code, this code runs for every slice */ 
function animateSlices(current,next,slice,animid,delay) 
{ 

setTimeout(function() { 

$(".slices:eq("+next+") .slice[name=slice"+slice+"]").css({ 
     display: "block", 
      marginTop: "-700px" 
}); 


$(".slices:eq("+next+") .slice[name=slice"+slice+"]").animate({ 
marginTop: "0px" 

},1000); 


    $(".slices:eq("+current+") .slice[name=slice"+slice+"]").animate({ 
marginTop: "700px"  
},1000); 



    }, delay); 


} 

그리고 당신은 버튼을

function anim() 
{ 
    if(!animating) 
    { 
     animating = true; 

     var j = 0; 
     var delay = 0; 
     current = $('.slices:visible').index('.slices'); 
     var siz = $('.slices').size(); 
     var cSize = $('.slices:visible').size(); 
     var txen = 2; 
     var rand = parseInt(Math.random()*3); 
     var last = $('.slices:last').index('.slices'); 
     if(cSize>1) 
     return; 

    //this part is calculating id of next image 
    if(siz > 1 && current!= last) 
     { 
     txen = current + 1; 
     } 
    else if(siz == 1) 
     { 
     txen = current; 
     } 
     else if(siz > 1 && current== last) 
     { 
     txen = 0; 
     } 

    //this part is makin next image slices visible and changes z-index for animation 
$(".slices:eq("+txen+")").css({ 
     display: "block", 
     zIndex: "92" 
}); 

$(".slices:eq("+current+")").css({ 
     zIndex: "91" 
});   

//this part calls animateSlices function for every next image slices 
    for(j=0;j<10;j++) 
    { 

    $(".slices:eq("+txen+") .slice[name=slice"+j+"]").css({ 
     marginTop: "0px" 
    }); 

     animateSlices(current,txen,j,rand,delay); 
    /*current = this image, txen = next image, j = slice number, rand = animation id, 
    delay = delay for animation */ 
if(rand==0) 
delay += 150; 
else 
delay += 50; 

} 

} 
else 
return; 

} 

편집 애니메이션을 클릭 할 때 호출 기능을 추가 한 : 나는 애니메이션 "marginTop"에서 "최고"로 변경 한과 각 슬라이스에 대한 절대 위치, 현재 해결 된 문제, 더 이상 지연되지 않습니다. jquery 코드를 사용하여 div를 배치하거나 동일한 마진을 많이 변경하면 지연이 발생할 수 있습니다.하지만 필자는 오페라 또는 크롬이 아닌 파이어 폭스에서만 발생한다고 말한 바 있습니다. 그 지연 문제를 일으키는 원인을 모르지만 내가 이것을 해결할 때 여기서 나의 해결책을 쓸 것이다. 지금은 marginTop의 최고 가치를 변경할 것입니다. 답변 해 주셔서 감사합니다. 다른 사용자가 이전에 발견으로

Answer 1

.animate 방법은 좀 프로세서 전력 소모가 전혀 신중하지 않는 경우입니다. 사람들은 최적의 방법으로 함수 내부의 문장을 구축하는 데 도움이 경우

jquery animate running laggy

JQuery - lags during animation

그래서 확인하십시오.

Answer 2

코드를 검토 한 결과, 애니메이션의 지연의 주된 이유는 조각이 개별 dom 요소로 추가되고 애니메이션이 주위의 사람들을 밀어 내고 특정 선택자를 조작하지 않아야한다는 것입니다.

내가 틀렸다면 정정 해주세요. 근본적으로 최신을 맨 위로 밀고 1 초 동안 볼 수있게 움직이는 것처럼 보입니다. 어떤 경우이든 상관 없지만 한 번에 두 개의 프레임 만 볼 수 있습니다. 맞습니까?

나는 자바 스크립트 객체를 만들고 조작을 위해 2 개의 특정 dom 요소를 채우는 데 사용할 것입니다.

<div id="current"></div> 
<div id="next"></div> 

애니메이션 콜백 및 js 개체의 적용 가능한 색인을 통해 이러한 요소의 CSS를 조작하십시오. 이 예제는 사용자의 요구를 반영하지 않을 수 있지만 교장은 동일합니다

이

var slices = { 
    current: 0, 
    image_arr: new Array(), 
    animating: false, 
    queue: null, 
    delay: 150, 
    init: function(){ 
     // obviously declare these variables and access them relevantly 
     for(imageN=0;imageN<imageCount;imageN++) 
     { 
      this.image_arr.push($("#image img:eq("+imageN+")").attr("src")); 
     } 
    }, 
    animate: function(){ 
     if(!animating) 
     { 
      this.animating = true; 
      // cycle through your image_arr instead of crawling the dom each iteration 
      // set jquery animations as expected then re-call function if needed 

      $('#current').css('background-image', this.image_arr[current]).delay(50).animate({marginTop: '700px'}, 1000, function(){ 
       this.current += 1; // assuming you're using an int to call the index value of image_arr 
      }); 

      $('#next').css({backgroundImage: this.image_arr[current], marginTop: '-700px').delay(50).animate({marginTop: '0px'}, 1000); 

      this.queue = setTimeout(function(){ 
       this.animate(); 
      }, this.delay); 
      //this should obviously be more considerate, but the idea is to recursively call animate until you're through animating 
     } 
    } 
}; 

$(document).ready(function(){ 
    slices.init(); 
}); 

이 예는 전혀 안정 또는 테스트하지이며 복사/붙여 넣기하면 명확하게 작동하지 않습니다,하지만 일반적인 생각이 밀어하는 것입니다 요소를 배열 또는 객체로 분할합니다. 물론 각 슬라이스의 객체를 배열로 밀어 넣을 수 있습니다. 무엇이든 당신의 필요에 어울립니다.

그러나 이렇게하면 모든 프레임에서 전체 DOM을 트래버스하지 않아도됩니다.

실제 애니메이션에 대한 링크를 게시하면 더 구체적으로 대답 할 수 있습니다. 나는 행동으로 보지 못했기 때문에 나는 단지 내가보고있는 것을 짐작했다. 나는 그것을 완전히 잘못 생각했을지도 모른다.