js $(window).scrollTop() , offset().top?
안녕하세요 . 현재 홈페이지를 만들고 있는데 이해가 안되는 부분이 있어서 글 올립니다.
현재 js 이벤트로 scroll에 따라 해당 section의 offset().top보다 window scrollTop()이 커지면
이벤트를 실행시키는 코드를 짜고 테스트까지 잘되는데 여러번 테스트하다가 문제를 발견했습니다.
어떨때는 알맞게 동작을 잘하지만 또 어떨때는 해당 section에 들어가기전에 event가 실행됩니다.
각 section들에 이미지들이 들어가는데 이미지 로딩이 늦게 되면 offset().top 값이 제대로 안잡히는 건가요?
그냥 아예 안되는거면 차라리 다른 방법을 알아볼텐데 됬다가 안됬다가 이러니까 안되는 이유 자체가 궁금해져서
혼자 알아보다가 이유를 찾지 못하여 글 올리게 되었습니다 ㅠㅠ
현재는 html에 img를 넣어둔 상태지만 나중에는 db에서 이미지 src를 들고와서 이미지를 넣는 방식을 하려고 하는데
위 방식대로 개발하면 문제 될 만한게 있을까요?
scrollTop 은 말씀하신것처럼 해당 요소 안에 들어가는 TEXT 나 img 등 크기가 바뀌는것으로도 변경됩니다.
인터넷 윈도우 사이즈 자체를 줄여도 발생할수있구요.
그런 경우는 말씀하신 img 크기가 매번 동일하다면 그 크기만큼 section 의 size 를 미리 잡아두시는게 첫번째 방법이 되겠습니다.
그러고도 동작이 비정상적인 경우가 자주 발생한다면 정적으로 100px; 등으로 잡아두지마시고.
section 의 height 를 받아온 후 다시 window 의 height 를 받아와서 동적 계산하여 사용하시면 되겠습니다.
문제가 발생하는 이유 - 이미지에 사이즈가 선언되어있지 않으면 브라우저에서 일단 최소크기로 엘리먼트를 로딩하고, 이미지를 불러오는 사이에 사이즈를 계산하여 다시 사이즈가 재계산됩니다. 거기서 오프셋값이 변동되는겁니다.
해결방법이 있습니다.
1. 이미지(img) 엘리먼트에 미리 가로/세로(width, height)를 지정해주세요.
1번을 적극권장합니다. 대부분의 프로덕션 환경에서는 거의 불가능에 가깝습니다만, 완벽한 해결법입니다.
2. imagesLoaded를 사용하여 event를 이미지 로드가 완료될경우 선언해주세요.
imagesLoaded - https://imagesloaded.desandro.com/
빠르게 해결할 수 있습니다만, 사용자가 느린 이미지를 가져올경우 말씀하신 이벤트 자체가 뒤늦게 선언될 가능성이 높습니다.
이외의 해결방법도 존재하겠지만, 제가 생각했을때 최선의 해결방법들입니다.
