$(문서)에 해당하는 jQuery 이외의 것은 무엇입니까?ready()?
jQuery가 입니까?$(document).ready()
ECMA에서 완벽하게 동작합니다.스니펫만 있으면 됩니다만, 보다 자세한 내용을 참조해 주세요.다른 옵션을 참조할 수 있습니다.
document.addEventListener("DOMContentLoaded", function() {
// code...
});
window.onload JQuery와$(document).ready$(document).ready 트리가 동안 .window.onload외부 자산과 이미지를 포함한 모든 요소를 확인합니다.
편집: Jan Derk가 관찰한 결과 IE8 이전 버전 추가.MDN에서 이 코드의 소스를 읽을 수 있습니다.
// alternative to DOMContentLoaded
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
// Initialize your application or run some code.
}
}
외에도 가 있습니다."interactive"자세한 내용은 MDN 문서를 참조하십시오.
이제 2018년이 되었으니 빠르고 간단한 방법이 있습니다.
이렇게 하면 이벤트 청취자가 추가되지만 이미 실행된 경우 돔이 준비 상태인지 또는 완료되었는지 확인합니다.이는 하위 리소스(이미지, 스타일시트, 프레임 등)의 로드가 완료되기 전 또는 후에 발생할 수 있습니다.
function domReady(fn) {
// If we're early to the party
document.addEventListener("DOMContentLoaded", fn);
// If late; I mean on time.
if (document.readyState === "interactive" || document.readyState === "complete" ) {
fn();
}
}
domReady(() => console.log("DOM is ready, come and get it!"));추가 판독치
- https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
- https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState
갱신하다
다음은 TypeScript를 포함한 표준 ES6 Import & Export를 사용하는 퀵 유틸리티 도우미입니다.의존관계로서 프로젝트에 인스톨 할 수 있는 퀵 라이브러리를 만들 수 있을지도 모릅니다.
자바스크립트
export const domReady = (callBack) => {
if (document.readyState === "loading") {
document.addEventListener('DOMContentLoaded', callBack);
}
else {
callBack();
}
}
export const windowReady = (callBack) => {
if (document.readyState === 'complete') {
callBack();
}
else {
window.addEventListener('load', callBack);
}
}
타입 스크립트
export const domReady = (callBack: () => void) => {
if (document.readyState === "loading") {
document.addEventListener('DOMContentLoaded', callBack);
}
else {
callBack();
}
}
export const windowReady = (callBack: () => void) => {
if (document.readyState === 'complete') {
callBack();
}
else {
window.addEventListener('load', callBack);
}
}
약속들
export const domReady = new Promise(resolve => {
if (document.readyState === "loading") {
document.addEventListener('DOMContentLoaded', resolve);
}
else {
resolve();
}
});
export const windowReady = new Promise(resolve => {
if (document.readyState === 'complete') {
resolve();
}
else {
window.addEventListener('load', resolve);
}
});
내가 조립한 작은 것
domready.domready.domply.dompl
(function(exports, d) {
function domReady(fn, context) {
function onReady(event) {
d.removeEventListener("DOMContentLoaded", onReady);
fn.call(context || exports, event);
}
function onReadyIe(event) {
if (d.readyState === "complete") {
d.detachEvent("onreadystatechange", onReadyIe);
fn.call(context || exports, event);
}
}
d.addEventListener && d.addEventListener("DOMContentLoaded", onReady) ||
d.attachEvent && d.attachEvent("onreadystatechange", onReadyIe);
}
exports.domReady = domReady;
})(window, document);
사용방법
<script src="domready.js"></script>
<script>
domReady(function(event) {
alert("dom is ready!");
});
</script>
또한 두 번째 인수를 전달하여 콜백이 실행되는 컨텍스트를 변경할 수도 있습니다.
function init(event) {
alert("check the console");
this.log(event);
}
domReady(init, console);
표준 기반의 대체품이 있습니다.
90% 이상의 브라우저에서 지원되지만 IE8에서는 지원되지 않는 DOMContentLoaded(따라서 JQuery에서 브라우저 지원에 사용하는 코드 이하)
document.addEventListener("DOMContentLoaded", function(event) {
//do work
});
jQuery의 네이티브 함수는 다음과 같이 window.onload보다 훨씬 복잡합니다.
function bindReady(){
if ( readyBound ) return;
readyBound = true;
// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", function(){
document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
jQuery.ready();
}, false );
// If IE event model is used
} else if ( document.attachEvent ) {
// ensure firing before onload,
// maybe late but safe also for iframes
document.attachEvent("onreadystatechange", function(){
if ( document.readyState === "complete" ) {
document.detachEvent( "onreadystatechange", arguments.callee );
jQuery.ready();
}
});
// If IE and not an iframe
// continually check to see if the document is ready
if ( document.documentElement.doScroll && window == window.top ) (function(){
if ( jQuery.isReady ) return;
try {
// If IE is used, use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
document.documentElement.doScroll("left");
} catch( error ) {
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
})();
}
// A fallback to window.onload, that will always work
jQuery.event.add( window, "load", jQuery.ready );
}
이는 질문에 대한 답변도 없고 jQuery 이외의 코드도 표시되지 않습니다.아래 @ sspedra의 답변을 참조하십시오.
★★★★★의 장점$(document).ready()에 발화한다는 입니다.window.onload로드 기능은 외부 자산과 이미지를 포함한 모든 항목이 로드될 때까지 기다립니다. $(document).ready단, 는 DOM 트리가 완료되어 조작이 가능하면 기동됩니다.수 jQuery를 하지 않고이 수 .jQuery를 사용하지 않고 DOM을 사용할 수 있도록 하려면 이 라이브러리에 체크인하십시오.누군가가 단지 추출한 것.readyj에서 질문하다.은 좋고 은 유용하다는 을 알 수 있을 이다.
http://youmightnotneedjquery.com/ #ready에 따르면 IE8에서 사용할 수 있는 훌륭한 대체품은 다음과 같습니다.
function ready(fn) {
if (document.readyState != 'loading') {
fn();
} else if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', fn);
} else {
document.attachEvent('onreadystatechange', function() {
if (document.readyState != 'loading')
fn();
});
}
}
// test
window.ready(function() {
alert('it works');
});개선점:개인적으로, 나는 또한 그 타입이fn함수입니다.그리고 @eliotregan의 제안대로 이벤트 청취자는 사용 후 삭제해 주세요.
function ready(fn) {
if (typeof fn !== 'function') {
throw new Error('Argument passed to ready should be a function');
}
if (document.readyState != 'loading') {
fn();
} else if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', fn, {
once: true // A boolean value indicating that the listener should be invoked at most once after being added. If true, the listener would be automatically removed when invoked.
});
} else {
document.attachEvent('onreadystatechange', function() {
if (document.readyState != 'loading')
fn();
});
}
}
// tests
try {
window.ready(5);
} catch (ex) {
console.log(ex.message);
}
window.ready(function() {
alert('it works');
});제가 이 질문에 늦게 대답하는 이유는 제가 이 답을 찾았지만 찾을 수 없었기 때문입니다.그리고 이것이 최선의 해결책이라고 생각합니다.
최근 브라우저에서 가장 쉬운 방법은 적절한 글로벌 이벤트 핸들러, onDOMContentLoaded, onloaded, onloaded data(...)를 사용하는 것입니다.
onDOMContentLoaded = (function(){ console.log("DOM ready!") })()
onload = (function(){ console.log("Page fully loaded!") })()
onloadeddata = (function(){ console.log("Data loaded!") })()DOMContentLoaded 이벤트는 스타일시트, 이미지 및 서브프레임의 로드가 완료될 때까지 기다리지 않고 초기 HTML 문서가 완전히 로드되고 구문 분석될 때 실행됩니다.완전히 로드된 페이지를 감지하는 경우에만 매우 다른 이벤트 로드를 사용하십시오.DOMContentLoaded가 훨씬 더 적합한 곳에서 로드를 사용하는 것은 매우 일반적인 실수이므로 주의해야 합니다.
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
사용되는 함수는 IIFE로, 준비되면 자동으로 트리거되므로 이 경우 매우 유용합니다.
https://en.wikipedia.org/wiki/Immediately-invoked_function_expression
스크립트 끝에 배치하는 것이 더 적절하다는 것은 분명합니다.
ES6에서는 화살표 함수로도 쓸 수 있습니다.
onload = (() => { console.log("ES6 page fully loaded!") })()가장 좋은 방법은 DOM 요소를 사용하는 것입니다.화살표 IIFE를 트리거하는 변수가 준비될 때까지 기다릴 수 있습니다.
동작은 동일하지만 메모리에 미치는 영향은 적습니다.
footer = (() => { console.log("Footer loaded!") })()<div id="footer">라이브러리가 없는 플레인 바닐라 자바스크립트?류입니니다다$는 단순한 식별자이며 사용자가 정의하지 않는 한 정의되지 않습니다.
는 jQuery를 정의합니다.$object ' object')이기 때문에jQuery다른 라이브러리와 충돌하지 않고 사용할 수 있습니다.)jQuery를 )를 jQuery(jQuery)를 합니다.$정의되지 않습니다.
아니면 플레인 JavaScript에서 동등한 것이 무엇인지 묻고 계십니까?이 경우, 당신은 아마도 바닐라 JavaScript에서 같은 효과를 얻을 수 있는 가장 빠르고 쉬운 방법을 원할 것이다.
body onLoad도 대안이 될 수 있습니다.
<html>
<head><title>Body onLoad Exmaple</title>
<script type="text/javascript">
function window_onload() {
//do something
}
</script>
</head>
<body onLoad="window_onload()">
</body>
</html>
언급URL : https://stackoverflow.com/questions/2304941/what-is-the-non-jquery-equivalent-of-document-ready
'programing' 카테고리의 다른 글
| 읽기 및 쓰기를 모두 위해 파일을 여는 방법은 무엇입니까? (0) | 2022.09.18 |
|---|---|
| MySQL에서 테이블 열 이름을 가져오시겠습니까? (0) | 2022.09.18 |
| php page html 출력을 최소화하는 방법 (0) | 2022.09.18 |
| 객체 지향 Javascript 베스트 프랙티스? (0) | 2022.09.18 |
| 정렬되지 않은 목록에 있는 요소의 빈도를 계산하려면 어떻게 해야 합니까? (0) | 2022.09.18 |