2010-08-07 34 views
10

Tôi cần phải đợi tài liệu sẵn sàng trong JavaScript của tôi, để chèn một div ở dưới cùng của cơ thể.

Tôi muốn:

  • Tạo file JavaScript này càng nhỏ càng tốt (biên dịch nó xuống để < 1kb nếu có thể)
  • inline mã mà cung cấp readyness tài liệu trong một đóng cửa (không có xuất khẩu nó)

Nội tuyến toàn bộ nguồn jQuery trong tệp của tôi sẽ quá lớn, vì vậy tôi đang tìm các phương pháp khác. window.onload sẽ hoạt động, nhưng tôi đặc biệt muốn sẵn sàng tài liệu và không đợi sự kiện window.onload.

Có ai biết đoạn mã JS có thể thực hiện việc này không? Hoặc tôi chỉ cần sao chép một phần của nguồn jQuery?

EDIT:

tôi quản lý để thu thập dữ liệu nguồn jQuery và đặt cùng với đoạn mã sau:

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(); 
}); 

Cảm ơn bạn rất nhiều vì đã giúp tôi tìm thấy điều này trong nguồn jQuery. Bây giờ tôi có thể đặt tất cả điều này trong một đóng cửa và làm công việc của tôi mà không xuất khẩu bất kỳ chức năng và gây ô nhiễm phạm vi toàn cầu.

+2

Bạn có thể lấy nguồn jQuery từ máy chủ của Google, trong đó sẽ cung cấp cho bạn một sự thay đổi tốt đẹp của nó là cachedd rồi. – Pointy

Trả lời

7

Một tùy chọn là chỉ cần tải tệp tin core.js jQuery từ github.

Có thể bạn sẽ giảm bớt một chút đối với mã bạn không cần. Sau đó chạy nó thông qua máy nén YUI, và nó phải là khá nhỏ.

Tôi đã thử nó, và mã này làm việc đúng cách:

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

Cập nhật: Điều này là nhỏ như tôi đã nhận nó. Nó là hoàn toàn từ jQuery và là khoảng 1.278 byte (nén). Nên nhận được nhỏ hơn khi bạn gzip.

Chỉ khác biệt là bạn cần phải gọi nó thích:

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

YUI nén:

(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})(); 

nguồn đầy đủ (một lần nữa, đây là jQuery code):

(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; 
})(); 

Tôi chắc chắn có ar e nhiều byte có thể bị xóa.

Đừng quên:

/*! 
* 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

Cảm ơn bạn đã chỉ ra đoạn mã phức tạp này! Tôi đã thay đổi mã để nó không xuất bất kỳ hình cầu nào, nhưng chức năng thì giống nhau. –

+0

@Attila - Bạn được chào đón. Các hình cầu duy nhất nên là '$' và 'jQuery'. Chắc chắn là một ý tưởng hay để loại bỏ '$'. Ngoài ra, nên bao gồm thông tin bản quyền thích hợp. – user113716

+0

Ahm, cảm ơn vì đã nhắc tôi đưa vào thông tin bản quyền thích hợp. Tôi không có tín dụng cho điều này, vì tất cả các mã thực tế ban đầu đến từ jQuery, tôi chỉ đổi tên một số chức năng để phù hợp với khẩu vị của tôi :) –

2

several implementations for "DOMReady" chức năng nhưng hầu hết những gì tôi có thể tìm thấy có vẻ hơi lỗi thời, vì vậy tôi không biết chúng sẽ hoạt động như thế nào với IE8 và như vậy.

Tôi khuyên bạn nên sử dụng jQuery's ready() như tôi nghĩ nó hứa hẹn khả năng tương thích giữa nhiều trình duyệt nhất. Tôi không phải là một chuyên gia trong mã nguồn của jQuery, nhưng this có vẻ là vị trí phù hợp (các dòng 812-845 hoặc tìm kiếm function bindReady).

0

Bạn có thể bắt đầu bằng tập lệnh: http://snipplr.com/view/6029/domreadyjs/, không được tối ưu hóa (nhưng hoạt động) cho Safari mới nhất (ví dụ: sử dụng bộ tính giờ thay vì được hỗ trợ DOMContentLoaded).

Các vấn đề liên quan