일은 내가 다음을보고있는 이유, 그리고 그것을 해결하는 방법에 대한 이해의 하단에 도착하기 위해 노력하고있어

변경 매우 극소수의 DOM을 가지고 있습니다. 페이지에 첫 번째 높이 값이 CSS로만 설정된 문서가 준비되어 있고, jQuery 함수가 해당 요소에 새로운 높이 값을 지정합니다. 내 문제는 페이지가 빌드 될 때입니다. 이 변화는 시각적으로 눈에 is니다. 요소가 jQuery 함수에서 새로운 높이 값을 빠르게 얻는 것을 볼 수 있습니다. 제 목표는이를 방지하는 것입니다. 따라서 페이지가로드 될 때 jQuery 높이 값을 가진 요소 만 볼 수 있습니다. 비동기 또는 지연이 설정되지 않은 한 모든 의사 준비 함수가 실행될 때까지 자바 스크립트 렌더링이 브라우저에서 페이지를 빌드하지 못하게한다고 생각했지만 지금은 잘못된 것이라고 가정하고 있습니다.일은 내가 다음을보고있는 이유, 그리고 그것을 해결하는 방법에 대한 이해의 하단에 도착하기 위해 노력하고있어

편집 :

내가 해결하기 위해 노력하고있어 문제가 특히 높이와 아무 상관이있다, 이것은 단지 예입니다, 명확히하기 위해, 나는이 사실을 주위에 일자리를 찾기 위해 노력하고있어 내 jQuery에서 시각적으로 지연되어 CSS를 doc에 적용하고 지연이 왜 발생하는지 더 잘 이해할 수 있습니다.

The test page link

전체 DOM : 당신이 상자를 사용자 창 높이의 50 %를 원한다면

<style> 
    html { 
     background: #eee; 
    } 
    .box { 
     height: 64px; 
     width: 50%; 
     max-width: 280px; 
     max-width: 1280px; 
     margin: 64px auto 0 auto; 
     position: relative; 
     background: #fff; 
     box-shadow: 0 0.08em 0.25em 0 rgba(0,0,0,0.3); 
    }  
</style> 

<script type='text/javascript' src='[my path]/js/jquery-3.1.1.min.js?ver=3.1.1'></script> 

<script type="text/javascript"> 
    jQuery(document).ready(function(){  
     function adjustBox() { 
      windowHeight = window.document.documentElement.clientHeight; 
      $('.box').css('height', windowHeight * 1/2); 
     } 
     adjustBox();  
    });  
</script> 

<div class="box"></div>

출처

2017-11-21 Sam Assoum

은 왜 그냥'50vh'에 CSS의 높이를 설정하지? –

글쎄, 내가 이해해야 할 문제는 페이지로드시 시각적으로 영향을 미치는 javascript의 지연을 막을 수있는 방법이라는 것입니다. –

언제든지 요소를 애니메이션으로 만들 수 있습니다. ?? 그렇지 않으면 CSS가 가장 좋은 방법입니다. 정확한 문제는 무엇입니까? 일반적으로 예제를 제공하면 실제로 필요하지 않은 답변을 가져올 수 있습니다. –

, 당신이 할 수있는 CSS와 :

.box { 
    height: 50vh; // vh => view-height 
}

귀하의 예를 들어 자바 스크립트 DOM이로드 된 후에 실행됩니다. 페이지가로드 된 후 .box 높이의 크기가 조정되는 것을 볼 수 있습니다. <script> 태그를 <head> 안에 넣고 jQuery.ready() 기능을 사용하지 않을 때 페이지가 완전히로드되기 전에 JS를 실행할 수 있습니다.

<head> 
    <script> 
     // 1 
     alert('this runs immediately. even before the document has been parsed'); 

     // 2 
     $(function() { 
      alert('this runs when the document has been loaded'); 
     }); 

     // 2 
     $(document).ready(function(){ 
      alert('this runs when the document has been loaded'); 
     }); 

     // 3 
     $(window).load(function(){ 
      alert('this runs when the document has been loaded AND resources like images has been loaded'); 
     }); 
    </script> 
</head> 
<body> 
    <script> 
     // 2 
     alert('this runs when the document has been loaded'); 
    </script> 
</body>

은 주석으로 1 : 아직로드되지 않기 때문에 JS 여기 문서를 조작 할 수있다. 리디렉션을하거나 서버 등에서 데이터를로드 할 수 있습니다.
2와 코멘트 : 이들은 기본적으로 같습니다. 이 문서는 JS에 의해 처리 될 준비가되었습니다. 그렇다고해서 모든 리소스가 로드 된 것은 아닙니다. 이미지의 정확한 높이를 얻을 수 없습니다.
3와 댓글 : 이미지의 높이를 얻으려면 $(window).load을 사용하고 싶습니다.

출처

2017-11-21 17:55:13

문제를 설명하기 위해 jQuery에서 CSS를 적용 할 때 문서의 준비가 지연되는 것과 관련하여 문제가 있음을 명확히하기 위해 질문을 편집했습니다. –

글쎄, 당신은 제목에 질문에 대답했습니다. "의사 준비 금지". 그래서 그냥 JS에서'jQuery (document) .ready'를 제거하십시오. –

음, 준비된 문서를 제거하면 코드가 실행되지 않습니까? JS/jQuery를 처음 사용했지만 필요하다고 생각 했습니까? –

vue/angular/etc ...와 비슷한 작업을 수행 할 수 있으며 완전히 처리 될 때까지 요소를 "숨기기"위해 적용 할 수있는 도우미 속성이 있습니다.

CSS

html { 
    background: #eee; 
} 
[data-cloak] { 
    display: none !important; 
} 
.box { 
    height: 64px; 
    width: 50%; 
    max-width: 280px; 
    max-width: 1280px; 
    margin: 64px auto 0 auto; 
    position: relative; 
    background: #fff; 
    box-shadow: 0 0.08em 0.25em 0 rgba(0,0,0,0.3); 
}

jQuery(document).ready(function(){  
    function adjustBox() { 
    windowHeight = window.document.documentElement.clientHeight; 
    $('.box') 
     .removeAttr('data-cloak') 
     .css('height', windowHeight * 1/2); 
    } 
    adjustBox();  
});

JSFiddle example

출처

2017-11-21 18:10:18 subhaze

또 다른 이유는 내가 JS와 그 킥 엉덩이 도서관을 공부해야합니다. –

그래, FOUSC는 싸우기 힘들지 만, 적어도 길들이기를 돕는 약간의 속임수가있다. – subhaze

일은 내가 다음을보고있는 이유, 그리고 그것을 해결하는 방법에 대한 이해의 하단에 도착하기 위해 노력하고있어

답변

관련 문제