포스트렌더 "플리커"를 제거하는 방법은?
저는 자바스크립트/Ajax 기법을 사용하여 순정자가 되기 위해 최선을 다했는데, 이는 모든 Ajax-y 동작이 기본 기능의 향상인 동시에, 자바스크립트가 비활성화되었을 때 사이트도 완전한 기능을 발휘할 수 있도록 하기 위함입니다.하지만, 이것은 몇 가지 문제를 일으킵니다.
경우에 따라서는 브라우저에서 자바스크립트가 활성화되어 있을 때만 DOM 노드를 볼 수 있어야 합니다.다른 경우에는 비활성화된 경우에만 표시되어야 합니다.(JQuery의 양식 플러그인을 사용하여) 자동으로 제출하는 onchange 핸들러와 함께 드롭다운이 있는 양식의 submit 버튼을 예로 들어 보겠습니다.
<form method="post" action=".">
<label for="id_state">State:</label>
<select name="state" id="id_state" onchange="$(this.form).ajaxSubmit(ajax_submit_handler);">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
</select>
<input class="with_js_disabled" type="submit" value="OK" />
</form>
그리고 자바스크립트:
<script type="text/javascript">
$(document).ready(function()
{
$(".with_js_disabled").hide();
});
</script>
자바스크립트가 활성화된 경우 (onchange 핸들러로 인해) 제출 버튼이 필요 없습니다.그러나 JQuery의 $(문서).ready function(및 보다 직접적인 document.onload)은 페이지가 완전히 로드되고 렌더링된 후에만 호출됩니다. 따라서 제출 버튼이 처음에 표시되고 자바스크립트가 실행되고 노드의 디스플레이가 "none"으로 설정되면 "flash"가 발생합니다.
저는 이것을 사업을 하는 데 드는 비용으로 받아들였고, 그것을 피할 방법을 찾지 못했습니다.하지만 효과를 최소화하거나 아예 없앨 수 있는 제가 모르는 기술이 있을까요?
편집:
그<noscript>아래 많은 사람들이 언급한 솔루션은 유망해 보이지만 사파리에서는 제게 효과가 없습니다.그러나 Prestaul의 두 번째 제안은 아주 잘 들어맞습니다.
<body>
<script type="text/javascript">
document.body.className += ' has_js';
</script>
<!-- the rest of your page -->
</body>
그 다음 스트레이트 CSS를 사용하여 스타일링 할 수 있습니다.
body .js_enabled_only { display: none; }
body .js_disabled_only { display: block; }
body.has_js .js_enabled_only { display: block; }
body.has_js .js_disabled_only { display: none; }
이 두 번째 줄은 참고용이므로 요소가 표시되지 않아야 하는 상황을 방지하기 위해 제거할 수 있습니다. 블록입니다.마찬가지로 다른 디스플레이 스타일의 경우 세 번째 선에서 다른 변형이 필요할 수 있습니다.하지만 이 솔루션은 훌륭하고 깨끗하며, 제 테스트에서는 깜박임 효과를 완전히 제거합니다.
다음 솔루션 중 몇 가지를 결합하는 것은 어떨까요?
<style type="text/javascript">
.only-without-script {
display: none;
}
</style>
<noscript>
<style type="text/javascript">
.only-with-script {
display: none;
}
.only-without-script {
display: block;
}
</style>
</noscript>
아니면 나는 신체에 클래스를 추가하는 것을 선호합니다.<script>본문 상단에 태그를 지정하고 .ready 이벤트를 사용하지 마십시오.):
<head>
<style type="text/javascript">
body.has-script .something-not-ajaxy {
display: none;
}
input.ajaxy-submit {
display: none;
}
body.has-script input.ajaxy-submit {
display: inline;
}
</style>
</head>
<body>
<script type="text/javascript">
document.body.className += ' has-script';
</script>
<!-- the rest of your page -->
</body>
당신과 같은 상황의 경우, 저는 보통 제출 버튼을 태그에 붙여놓습니다.아무도 제안하지 않아서 이 부분들을 중심으로 나쁜 관행으로 여겨질지는 모르겠지만 제가 사용하는 것이고 저에게 효과가 있습니다.
자바스크립트가 활성화되어 있을 때 노드만 보이기를 원한다면, 머리에서 다음과 같은 작업을 할 수 있습니다.
<noscript>
<style type="text/css">
.js-enabled { display: none; }
</style>
</noscript>
그리고 나서 자바스크립트 전용 요소에 클래스를 부여합니다.js-enabled.
David가 말한 것처럼, 모든 "불필요한" HTML 요소를 숨기기 위해 스타일시트를 추가하는 자바스크립트를 추가할 수 있습니다.
<head>
...
<script type="text/javascript" language="javascript">
document.write('<style type="text/css"> .disabled-if-javascript { display: none; } </style>');
</script>
</head>
...
자바스크립트가 활성화되어 있으면 본문이 로드되기도 전에 클래스 "disabled-if-javascript"의 모든 요소를 hidden으로 설정합니다.javascript가 활성화된 경우 숨길 필요가 있는 모든 요소에 이 클래스를 추가하기만 하면 됩니다.non-javascript를 위해 숨겨질 특정 요소를 표시하기 위해 반대의 역할을 하는 class enabled-if-javascript가 필요할 수도 있습니다.추가할 필요가 있을 수도 있습니다."!important" 기존(비 jav스크립트) 규칙을 무시하려면 사용자의 스타일 정의를 따라야 합니다.
나는 두 가지 방법을 생각할 수 있습니다.
1 - 자바스크립트가 활성화되어 있는지 미리 감지하여 쿠키/세션에 저장합니다.이 작업은 첫 페이지에서 수행할 수 있으며 대부분의 깜박임을 제거해야 합니다.
2 - 라이브쿼리 플러그인을 사용합니다. 요소를 DOM에 추가할 때 이를 감지합니다.자바스크립트 로딩이 완료되면 바로 실행할 수 있으며, 이는 문서(머리에 있음)보다 훨씬 이전일 것입니다.
$('.with_js_disabled').livequery(function() {
$(this).hide();
});
그냥 생각:이것이 효과가 있을지는 모르겠지만, 버튼을 숨길 CSS 스타일 요소를 작성하기 위해 문서 헤드에 자바스크립트를 넣어볼 수 있습니다.
간단한 시도 방법: 추가<script>jQuery.ready();</script>시체 태그를 닫기 직전에 말입니다
이렇게 하면 '준비 완료' 이벤트에 대한 모든 바인딩이 강제로 실행됩니다.그리고 문서의 마지막에 발사하게 하면, DOM ContentLoaded 이벤트의 "native"가 아직 발사되지 않은 경우에도 DOM이 로드되고 나갈 준비가 됩니다.
이것은 일반적으로 제가 깜박임을 제거하고 싶을 때, 특히 IE/win에서 작동합니다. 왜냐하면 IE는 jQuery의 'ready' 이벤트에서 자체 domready 에뮬레이터를 가지고 있기 때문입니다.
언급URL : https://stackoverflow.com/questions/463670/how-to-eliminate-post-render-flicker
'it-source' 카테고리의 다른 글
| 실행 중인 모든 도커 컨테이너를 다시 시작하는 명령? (0) | 2023.11.02 |
|---|---|
| MS Word 문서에서 구문 강조 표시 (0) | 2023.11.02 |
| 파워셸:파일이 잠겨 있는지 확인 (0) | 2023.11.02 |
| 워드프레스 웹사이트에서 json 응답을 얻는 방법 (0) | 2023.11.02 |
| 스프링 프로토타입 범위 - 사용 사례? (0) | 2023.11.02 |