스크롤의 배경 변경이 깜박입니다.

내 페이지에서 작동하는 "스크롤의 배경 이미지 변경"을 시도했습니다. 하지만 스크롤하는 동안 변경 사항이 깜박입니다. 다른 스레드에서 솔루션을 찾을 수 없습니다.스크롤의 배경 변경이 깜박입니다.

이 내가 가진 무엇 :

JQuery와 :

$(function(){ 
$(document).scroll(function() { 


    if ($(this).scrollTop() > 1) { 
     $('body').css({ 
      backgroundImage: 'url("img/picture1.jpg")' 
     }); 
    } 


     if ($(this).scrollTop() > 800) { 
     $('body').css({ 
      backgroundImage: 'url("img/picture2.jpg")' 
     }); 
    }

CSS :

body { 
    background: url('../img/picture1.jpg'); 
    background-repeat:no-repeat; 
    background-attachment:fixed; 
    background-size:cover; 
}

출처

2013-12-08 Dennis

실시간 버전 또는 http://jsfiddle.net/을 보여 주실 수 있습니까? – ggdx

확실한 ... 그냥 잠깐 – Dennis

계속해서 배경 이미지를 계속해서 설정하고 있습니다. 변수에 상태를 저장해야하기 때문에 800px 표식을 처음 전달한 경우에만 배경을 설정해야합니다. – HaukurHaf

깜박이 인해 두 번째 이미지 로딩에 아마. 당신은 자바 스크립트의 기본 Image 개체를 사용하여 두 번째 이미지를 미리로드 할 수 있습니다

var newImg = new Image(); 
newImg.src = 'img/picture2.jpg';

이 jsfiddle를 참조하십시오.

출처

2013-12-08 09:14:12

고마워요! 하지만 더 많은 사진을 찍으려면 어떻게해야합니까? 이 작동하지 않습니다 : http://jsfiddle.net/VjmfY/2/ – Dennis

함수를 만들고 모든 이미지를 미리로드 할 인수로 전달할 수 있습니다. [jsfiddle.net/VjmfY/3/](http://jsfiddle. –

배경 이미지를 변경하고 싶지만 800 스크롤 증분과 같이 일관되게 미리로드하고 변경하려면 완전히 확신 할 수 없습니다. 나는 당신을 도울 해결책을 만들었다. –

스크롤의 배경 변경이 깜박입니다.

답변

관련 문제