Chrome에서 소셜 버튼을 jquery로 업데이트하면 본문 배경 이미지가 다시로드됩니다.

아래 코드는 작동합니다. select 태그에서 선택한 값의 부동 막대 onchange에서 소셜 버튼을 업데이트합니다.Chrome에서 소셜 버튼을 jquery로 업데이트하면 본문 배경 이미지가 다시로드됩니다.

$('select.select').change(function(e) { 

    e.preventDefault(); 

    var value = $('select.select option:selected').val(); 
    do_social(value); 
    return false; 

}); 

function do_social(str) 
{ 
$(".dd_inner").fadeOut("slow"); 
$.when(CreateNewLikeButton(str),CreateNewPlus1Button(str),CreateNewLinkedinButton(str),CreateNewSuButton(str)).done(function(){ 
$(".dd_inner").fadeIn("slow"); 
}); 

}

버튼이 업데이트되면 몸의 배경 이미지가 사라지고 다시 나타납니다. do_social()과 동시에 실행되는 많은 다른 기능이 있지만 분리했을 때이 문제에 대해 책임을지지 않습니다. 그 CSS는,

body { 
    line-height: 1; 
    background: url(images/bg.png) repeat-y; 
background-size: 100; 
-webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 


}

dd_inner이 사회 부동 바의 래퍼 :

.dd_inner { 
    margin: 0 auto; 
    position: relative; 
}

이 나를 인도 해 주셔서 감사합니다

이

내가 body 태그에 적용하고있는 스타일 문제는 내 웹 사이트가 비정상적으로 보이게 만들고 해결책을 찾고있는 중입니다. 나는 여기에 추가 정보를 제공하기 위해왔다.

다시 고맙습니다.

출처

2013-04-26 whiteletters in blankpapers

선택 단추 또는 사교 단추가 상대적으로 문서 트리의 위쪽에 있습니까? 설명하는 문제는 브라우저 '리플 로우'와 유사합니다. 나는 버튼 주위에 다른 div를 배치 (위치 지정이없는 무언가) 한 다음 그 페이딩을 시도 할 것입니다. 불행히도 나는 어떤 더 좋은 아이디어도 가지고 있지 않다. –

@Jon Jaques 귀하의 의견은 일부 페이지 수직 위치에서 일어나는 저의 발언을 저에게 말했습니다. 제가 브라우저 페이지의 하단에있는 예를 들면, 그것은 발생하지 않습니다. 부동 바 위치에 따라 다릅니다. –

리플 로우라는 단어는 매우 중요합니다. http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/ –

배경 이미지 자체에 대한 또 다른 문제가 있었지만 브라우저 창 크기를 조정하면서 모양을 유지할 수있는 방법을 찾고있었습니다. 내가 한 :

이제 문제가 해결되었습니다. 하나씩 CSS 항목을 분리하면 fixed이 리플 로우 문제를 해결한다는 것을 알게되었습니다.

평소 도움을 청하니 고맙습니다. @Jon Jaques.

출처

2013-04-28 01:48:18

당신이 그것을 알아 낸 것을 기쁘게 생각합니다. :) –

대단히 감사합니다. –

Chrome에서 소셜 버튼을 jquery로 업데이트하면 본문 배경 이미지가 다시로드됩니다.

답변

관련 문제