페이지가 태블릿 또는 데스크톱에로드되기 전에 DOM 재정렬하기

이것을 수행하는 가장 좋은 방법을 찾고 있습니다. 내 레이아웃은 모바일이지만 태블릿 또는 데스크톱에서는 다른 배포를 위해 변경됩니다. 문제는 태블릿이나 데스크톱에서 처음으로 페이지에 액세스 할 때 밀리 초 단위로 모바일 DOM 버전을 볼 수 있기 때문입니다. 내 질문은 페이지를로드하기 전에 reordered DOM을로드하는 가장 좋은 방법은 무엇입니까? 자바 스크립트를 body으로 가져 가세요? DOM을 설정하는 동안 로더 만들기?페이지가 태블릿 또는 데스크톱에로드되기 전에 DOM 재정렬하기

모든 의견을 환영합니다.

Here's 내 코드 :

function listenReorder(e) { 
    if ($(window).width() > 620) { 
     $(".container-logo").insertAfter(".container-presentation"); 
     $(".languages").insertAfter(".container-presentation"); 
    }else{ 
     $(".container-presentation").insertAfter(".container-logo"); 
     $(".languages").insertAfter(".container-logo"); 
    } 
}; 

$(window).on("load resize", listenReorder);

출처

2015-01-08 Antonio

'$ (document) .ready()'를 사용해 보셨나요? – DaniP

DOM이 존재할 때까지 DOM을 다시 정렬 할 수 없습니다 (클라이언트 측 코드 사용). 그래서'페이지를 로딩하기 전에 DOM을 재 배열하는 '방법이 없다. 'ready'를 사용하면 모든 이미지를 기다릴 필요가 없습니다. 재주문이 완료 될 때까지 로딩 마스크를 사용할 수도 있습니다. – charlietfl

@ Danko 예, 그 이유가 바로 태블릿 또는 데스크톱 버전이 현재 표시되지 않는 이유입니다. jQuery는 문서가 함수를 실행할 준비가되기를 기다리고있다. – Antonio

대신은 미디어 쿼리 +를 order 속성을 통해 주문 지원 CSS의 flexboxes를 사용할 수있는 자바 스크립트와 레이아웃을 변경하려고 시도하는 중.

JavaScript로이 작업을 수행하고 싶을 때를 대비하여 domcontentloaded 이벤트가 발생하면 페이지가 이미 부분적으로 렌더링 될 수 있습니다. 변형 관찰자를 사용하거나 애니메이션 프레임 이벤트 리스너에게 변경하려는 요소가 HTML 파서에 의해 DOM에 이미 삽입되어 있는지 확인하도록 요구하면 이전 상태가 사용자에게 표시되기 전에 가능한 빨리 변경 작업을 수행 할 수 있습니다.

출처

2015-01-09 23:45:32 the8472

페이지가 태블릿 또는 데스크톱에로드되기 전에 DOM 재정렬하기

답변

관련 문제