2010-08-07 21 views
10

मुझे शरीर के निचले हिस्से में एक div डालने के लिए, मेरी जावास्क्रिप्ट में दस्तावेज़ तैयार करने की प्रतीक्षा करनी है।

मैं चाहता हूँ:

  • मेकअप इस जावास्क्रिप्ट संभव के रूप में छोटे फ़ाइल निर्यात के बिना
  • इनलाइन कोड है कि एक बंद में दस्तावेज़ readyness प्रदान करता है ((< 1KB यदि संभव हो तो के लिए यह संकलन नीचे))

मेरी फ़ाइल में पूरे jQuery स्रोत को रेखांकित करना बहुत बड़ा होगा, इसलिए मैं अन्य विधियों की तलाश में हूं। window.onload काम करेगा, लेकिन मैं विशेष रूप से दस्तावेज़ तैयार करना चाहता हूं, और window.onload ईवेंट की प्रतीक्षा न करें।

क्या कोई भी जेएस स्निपेट जानता है जो ऐसा कर सकता है? या मुझे बस 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

आप गूगल के सर्वर से jQuery स्रोत है, जो आपको यह पहले से ही cachedd होने का एक अच्छा बदलाव देना होगा लाने सकता है। – Pointy

उत्तर

7

एक विकल्प केवल core.js जिथब से jQuery फ़ाइल प्राप्त करना होगा।

आप शायद उस कोड के लिए इसे थोड़ा सा पतला कर सकते हैं जिसकी आपको आवश्यकता नहीं है। फिर इसे यूयूआई कंप्रेसर के माध्यम से चलाएं, और यह बहुत छोटा होना चाहिए।

मैं इसे करने की कोशिश की है, और इस कोड को ठीक से काम किया:

$(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

@ एटिला - आपका स्वागत है। केवल ग्लोबल्स '$' और 'jQuery' होना चाहिए। निश्चित रूप से '$' से छुटकारा पाने का एक अच्छा विचार है। साथ ही, उचित कॉपीराइट जानकारी शामिल करनी चाहिए। – user113716

+0

अहम, उचित कॉपीराइट जानकारी शामिल करने के लिए मुझे याद दिलाने के लिए धन्यवाद। मैं इसके लिए कोई श्रेय नहीं लेता, क्योंकि मूल कोड मूल रूप से jQuery से आता है, मैंने केवल अपने स्वाद से मेल खाने के लिए कुछ फ़ंक्शंस का नाम दिया :) –

2

several implementations for "DOMReady" फ़ंक्शंस हैं लेकिन अधिकांश जो मुझे मिल सकता है, वे थोड़ा दिनांकित प्रतीत होते हैं, इसलिए मुझे नहीं पता कि वे आईई 8 और इस तरह से कैसे व्यवहार करेंगे।

मैं jQuery के तैयार() का उपयोग करने की अनुशंसा करता हूं क्योंकि मुझे लगता है कि यह सबसे क्रॉस-ब्राउज़र संगतता का वादा करता है। मैं jQuery के स्रोत कोड में एक विशेषज्ञ नहीं हूं, लेकिन this सही स्थान (लाइन 812-845 या function bindReady के लिए खोज) लगता है।

0

आप स्क्रिप्ट के साथ शुरू कर सकते हैं: http://snipplr.com/view/6029/domreadyjs/, नवीनतम सफारी के लिए अनुकूलित (लेकिन काम नहीं) हालांकि (उदाहरण के लिए समर्थित DOMContentLoaded के बजाय टाइमर का उपयोग करें)।

संबंधित मुद्दे