2010-08-07 6 views
10

자바 스크립트에서 문서 준비가 완료 될 때까지 기다렸다가 본문 하단에 div를 삽입해야합니다.

내가하고 싶은 :

  • 메이크업이 자바 스크립트가 가능한 한 작은 파일을 보내지 않고
  • 인라인 폐쇄에 문서 readyness을 제공하는 코드 ((< 1킬로바이트 가능한 경우에 그것을 아래로 컴파일))

내 파일에서 전체 jQuery 소스를 인라인하는 것이 너무 커서 다른 방법을 찾고 있습니다. window.onload가 작동하지만 문서 준비가 필요하며 window.onload 이벤트를 기다리지 않아야합니다.

누구나이 작업을 수행 할 수있는 JS 스 니펫을 알고 있습니까? 아니면 jQuery 소스의 일부만 복사해야합니까?

편집 :

var ready = (function() { var ready_event_fired = false; var ready_event_listener = function (fn) { // Create an idempotent version of the 'fn' function var idempotent_fn = function() { if (ready_event_fired) { return; } ready_event_fired = true; return fn(); } // The DOM ready check for Internet Explorer var do_scroll_check = function() { if (ready_event_fired) { return; } // If IE is used, use the trick by Diego Perini // http://javascript.nwbox.com/IEContentLoaded/ try { document.documentElement.doScroll('left'); } catch(e) { setTimeout(do_scroll_check, 1); return; } // Execute any waiting functions return idempotent_fn(); } // If the browser ready event has already occured if (document.readyState === "complete") { return idempotent_fn() } // Mozilla, Opera and webkit nightlies currently support this event if (document.addEventListener) { // Use the handy event callback document.addEventListener("DOMContentLoaded", idempotent_fn, false); // A fallback to window.onload, that will always work window.addEventListener("load", idempotent_fn, 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", idempotent_fn); // A fallback to window.onload, that will always work window.attachEvent("onload", idempotent_fn); // If IE and not a frame: continually check to see if the document is ready var toplevel = false; try { toplevel = window.frameElement == null; } catch (e) {} if (document.documentElement.doScroll && toplevel) { return do_scroll_check(); } } }; return ready_event_listener; })(); // TEST var ready_1 = function() { alert("ready 1"); }; var ready_2 = function() { alert("ready 2"); }; ready(function() { ready_1(); ready_2(); }); 

는 당신에게 jQuery를 소스에서 발견이 날 도와 주셔서 대단히 감사합니다 : 나는 jQuery를 소스를 크롤링하고 다음 코드와 함께 넣어 관리

. 이제 모든 기능을 종료하고 전역 범위를 오염시키지 않고 모든 작업을 종료하고 작업을 수행 할 수 있습니다.

+2

당신은 당신이 이미 cachedd되는 좋은 변화를 줄 것 구글의 서버에서 jQuery를 소스를 가져올 수 있습니다. – Pointy

답변

7

하나의 옵션은 github에서 core.js jQuery 파일을 가져 오는 것입니다.

필요하지 않은 코드에 대해서는 상당히 슬림 할 수 있습니다. 그런 다음 유이 (YUI) 압축기를 통해 실행하면 꽤 작아야합니다.

나는 그것을 시도하고이 코드를 제대로 작동 :

$(function() { 
    var newDiv = document.createElement('div'); 
    document.getElementsByTagName('body')[0].appendChild(newDiv); 
}); 

업데이트 : 이것은 내가 얻은 것만 큼 작았습니다. 그것은 전적으로 jQuery에서 약 1,278 바이트 (압축)입니다. gzip을 할 때 작아 져야합니다.

$.fn.ready(function() { 
    // your code 
}); 

YUI 압축을 :

만 차이가 당신이 좋아하는 그것을 호출 할 필요가 있다는 것입니다

(function() { 
var jQuery = function(selector, context) { 
    }, 
    _jQuery = window.jQuery, 
    _$ = window.$, 

    rootjQuery, 
    readyBound = false, 
    readyList = [], 
    DOMContentLoaded; 

jQuery.fn = { 
    ready: function(fn) { 
     jQuery.bindReady(); 
     if (jQuery.isReady) { 
      fn.call(document, jQuery); 
     } else if (readyList) { 
      readyList.push(fn); 
     } 
     return this; 
    } 
}; 
jQuery.isReady = false; 
jQuery.ready = function() { 
     if (!jQuery.isReady) { 
      if (!document.body) { 
       return setTimeout(jQuery.ready, 13); 
      } 
      jQuery.isReady = true; 
      if (readyList) { 
       var fn, i = 0; 
       while ((fn = readyList[ i++ ])) { 
        fn.call(document, jQuery); 
       } 
       readyList = null; 
      } 
      if (jQuery.fn.triggerHandler) { 
       jQuery(document).triggerHandler("ready"); 
      } 
     } 
    }; 
jQuery.bindReady = function() { 
     if (readyBound) { 
      return; 
     } 
     readyBound = true; 

     if (document.readyState === "complete") { 
      return jQuery.ready(); 
     } 
     if (document.addEventListener) { 
      document.addEventListener("DOMContentLoaded", DOMContentLoaded, false); 
      window.addEventListener("load", jQuery.ready, false); 
     } else if (document.attachEvent) { 

      document.attachEvent("onreadystatechange", DOMContentLoaded); 
      window.attachEvent("onload", jQuery.ready); 

      var toplevel = false; 
      try { 
       toplevel = window.frameElement == null; 
      } catch(e) {} 
      if (document.documentElement.doScroll && toplevel) { 
       doScrollCheck(); 
      } 
     } 
    }; 
rootjQuery = jQuery(document); 
if (document.addEventListener) { 
    DOMContentLoaded = function() { 
     document.removeEventListener("DOMContentLoaded", DOMContentLoaded, false); 
     jQuery.ready(); 
    }; 
} else if (document.attachEvent) { 
    DOMContentLoaded = function() { 
     if (document.readyState === "complete") { 
      document.detachEvent("onreadystatechange", DOMContentLoaded); 
      jQuery.ready(); 
     } 
    }; 
} 
function doScrollCheck() { 
    if (jQuery.isReady) { 
     return; 
    } 
    try { 

     document.documentElement.doScroll("left"); 
    } catch(e) { 
     setTimeout(doScrollCheck, 1); 
     return; 
    } 
    jQuery.ready(); 
} 
window.jQuery = window.$ = jQuery; 
})(); 
:

(function(){var e=function(i,j){},c=window.jQuery,h=window.$,d,g=false,f=[],b;e.fn={ready:function(i){e.bindReady();if(e.isReady){i.call(document,e)}else{if(f){f.push(i)}}return this}};e.isReady=false;e.ready=function(){if(!e.isReady){if(!document.body){return setTimeout(e.ready,13)}e.isReady=true;if(f){var k,j=0;while((k=f[j++])){k.call(document,e)}f=null}if(e.fn.triggerHandler){e(document).triggerHandler("ready")}}};e.bindReady=function(){if(g){return}g=true;if(document.readyState==="complete"){return e.ready()}if(document.addEventListener){document.addEventListener("DOMContentLoaded",b,false);window.addEventListener("load",e.ready,false)}else{if(document.attachEvent){document.attachEvent("onreadystatechange",b);window.attachEvent("onload",e.ready);var i=false;try{i=window.frameElement==null}catch(j){}if(document.documentElement.doScroll&&i){a()}}}};d=e(document);if(document.addEventListener){b=function(){document.removeEventListener("DOMContentLoaded",b,false);e.ready()}}else{if(document.attachEvent){b=function(){if(document.readyState==="complete"){document.detachEvent("onreadystatechange",b);e.ready()}}}}function a(){if(e.isReady){return}try{document.documentElement.doScroll("left")}catch(i){setTimeout(a,1);return}e.ready()}window.jQuery=window.$=e})(); 

전체 소스 (다시,이 jQuery 코드)

나는 거기에 ar 제거 할 수있는 바이트가 더 많습니다.

은 잊지 마세요 :

/*! 
* jQuery JavaScript Library v1.4.2 
* http://jquery.com/ 
* 
* Copyright 2010, John Resig 
* Dual licensed under the MIT or GPL Version 2 licenses. 
* http://jquery.org/license 
*/ 
+0

이 까다로운 코드를 지적 해 주셔서 감사합니다! 전역 변수를 내 보내지 않도록 코드를 변경했지만 기능은 동일합니다. –

+0

@Attila - 오신 것을 환영합니다. 유일한 전역 변수는'$'와'jQuery'이어야합니다. 확실히'$'를 없애는 것이 좋습니다. 또한 올바른 저작권 정보를 포함해야합니다. – user113716

+0

Ahm, 적절한 저작권 정보를 포함시켜 주셔서 감사합니다. 모든 실제 코드는 원래 jQuery에서 비롯되었으므로 필자는이 점을 인정하지 않고 단지 내 취향에 맞게 일부 함수의 이름을 변경했습니다. –

2

several implementations for "DOMReady" 기능이 있지만 대부분 내가 찾을 수있는 것은 약간 날짜가있는 것 같아서 IE8 등으로 어떻게 작동 할 것인지 모르겠다.

jQuery의 ready() 사용은 브라우저 간 호환성이 가장 좋을 것이라고 생각합니다. jQuery의 소스 코드 전문가는 아니지만 this이 올바른 위치 (줄 812-845 또는 function bindReady 검색) 인 것 같습니다.

관련 문제