Tôi có một kịch bản sử dụng $(document).ready , nhưng nó không sử dụng bất cứ thứ gì khác từ jQuery. Tôi muốn làm sáng nó lên bằng cách loại bỏ phụ thuộc jQuery.

Làm cách nào tôi có thể thực hiện $(document).readychức năng của riêng mình mà không cần sử dụng jQuery? Tôi biết rằng việc sử dụng window.onloadsẽ không giống nhau, vì các window.onloadđám cháy sau khi tất cả các hình ảnh, khung hình, v.v. đã được tải.

Có một sự thay thế dựa trên tiêu chuẩn, DOMContentLoadedđược hỗ trợ bởi hơn 98% trình duyệt , mặc dù không phải IE8:

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work
});

Hàm riêng của jQuery phức tạp hơn nhiều so với window.onload, như được mô tả dưới đây.

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

Biên tập:

Đây là một sự thay thế khả thi cho jQuery đã sẵn sàng

function ready(callback){
    // in case the document is already rendered
    if (document.readyState!='loading') callback();
    // modern browsers
    else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback);
    // IE <= 8
    else document.attachEvent('onreadystatechange', function(){
        if (document.readyState=='complete') callback();
    });
}

ready(function(){
    // do something
});

Được lấy từ https://plainjs.com/javascript/events/rucky-code-when-the-document-is- yet-15 /

Một chức năng domReady tốt ở đây được lấy từ https://stackoverflow.com/a/9899701/175071

Vì câu trả lời được chấp nhận rất xa, tôi đã ghép một hàm "sẵn sàng" như jQuery.ready() dựa trên nguồn jQuery 1.6.2:

var ready = (function(){

    var readyList,
        DOMContentLoaded,
        class2type = {};
        class2type["[object Boolean]"] = "boolean";
        class2type["[object Number]"] = "number";
        class2type["[object String]"] = "string";
        class2type["[object Function]"] = "function";
        class2type["[object Array]"] = "array";
        class2type["[object Date]"] = "date";
        class2type["[object RegExp]"] = "regexp";
        class2type["[object Object]"] = "object";

    var ReadyObj = {
        // Is the DOM ready to be used? Set to true once it occurs.
        isReady: false,
        // A counter to track how many items to wait for before
        // the ready event fires. See #6781
        readyWait: 1,
        // Hold (or release) the ready event
        holdReady: function( hold ) {
            if ( hold ) {
                ReadyObj.readyWait++;
            } else {
                ReadyObj.ready( true );
            }
        },
        // Handle when the DOM is ready
        ready: function( wait ) {
            // Either a released hold or an DOMready/load event and not yet ready
            if ( (wait === true && !--ReadyObj.readyWait) || (wait !== true && !ReadyObj.isReady) ) {
                // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
                if ( !document.body ) {
                    return setTimeout( ReadyObj.ready, 1 );
                }

                // Remember that the DOM is ready
                ReadyObj.isReady = true;
                // If a normal DOM Ready event fired, decrement, and wait if need be
                if ( wait !== true && --ReadyObj.readyWait > 0 ) {
                    return;
                }
                // If there are functions bound, to execute
                readyList.resolveWith( document, [ ReadyObj ] );

                // Trigger any bound ready events
                //if ( ReadyObj.fn.trigger ) {
                //    ReadyObj( document ).trigger( "ready" ).unbind( "ready" );
                //}
            }
        },
        bindReady: function() {
            if ( readyList ) {
                return;
            }
            readyList = ReadyObj._Deferred();

            // Catch cases where $(document).ready() is called after the
            // browser event has already occurred.
            if ( document.readyState === "complete" ) {
                // Handle it asynchronously to allow scripts the opportunity to delay ready
                return setTimeout( ReadyObj.ready, 1 );
            }

            // Mozilla, Opera and webkit nightlies currently support this event
            if ( document.addEventListener ) {
                // Use the handy event callback
                document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
                // A fallback to window.onload, that will always work
                window.addEventListener( "load", ReadyObj.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", DOMContentLoaded );

                // A fallback to window.onload, that will always work
                window.attachEvent( "onload", ReadyObj.ready );

                // 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 ) {
                    doScrollCheck();
                }
            }
        },
        _Deferred: function() {
            var // callbacks list
                callbacks = [],
                // stored [ context , args ]
                fired,
                // to avoid firing when already doing so
                firing,
                // flag to know if the deferred has been cancelled
                cancelled,
                // the deferred itself
                deferred  = {

                    // done( f1, f2, ...)
                    done: function() {
                        if ( !cancelled ) {
                            var args = arguments,
                                i,
                                length,
                                elem,
                                type,
                                _fired;
                            if ( fired ) {
                                _fired = fired;
                                fired = 0;
                            }
                            for ( i = 0, length = args.length; i < length; i++ ) {
                                elem = args[ i ];
                                type = ReadyObj.type( elem );
                                if ( type === "array" ) {
                                    deferred.done.apply( deferred, elem );
                                } else if ( type === "function" ) {
                                    callbacks.push( elem );
                                }
                            }
                            if ( _fired ) {
                                deferred.resolveWith( _fired[ 0 ], _fired[ 1 ] );
                            }
                        }
                        return this;
                    },

                    // resolve with given context and args
                    resolveWith: function( context, args ) {
                        if ( !cancelled && !fired && !firing ) {
                            // make sure args are available (#8421)
                            args = args || [];
                            firing = 1;
                            try {
                                while( callbacks[ 0 ] ) {
                                    callbacks.shift().apply( context, args );//shifts a callback, and applies it to document
                                }
                            }
                            finally {
                                fired = [ context, args ];
                                firing = 0;
                            }
                        }
                        return this;
                    },

                    // resolve with this as context and given arguments
                    resolve: function() {
                        deferred.resolveWith( this, arguments );
                        return this;
                    },

                    // Has this deferred been resolved?
                    isResolved: function() {
                        return !!( firing || fired );
                    },

                    // Cancel
                    cancel: function() {
                        cancelled = 1;
                        callbacks = [];
                        return this;
                    }
                };

            return deferred;
        },
        type: function( obj ) {
            return obj == null ?
                String( obj ) :
                class2type[ Object.prototype.toString.call(obj) ] || "object";
        }
    }
    // The DOM ready check for Internet Explorer
    function doScrollCheck() {
        if ( ReadyObj.isReady ) {
            return;
        }

        try {
            // If IE is used, use the trick by Diego Perini
            // http://javascript.nwbox.com/IEContentLoaded/
            document.documentElement.doScroll("left");
        } catch(e) {
            setTimeout( doScrollCheck, 1 );
            return;
        }

        // and execute any waiting functions
        ReadyObj.ready();
    }
    // Cleanup functions for the document ready method
    if ( document.addEventListener ) {
        DOMContentLoaded = function() {
            document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
            ReadyObj.ready();
        };

    } else if ( document.attachEvent ) {
        DOMContentLoaded = function() {
            // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
            if ( document.readyState === "complete" ) {
                document.detachEvent( "onreadystatechange", DOMContentLoaded );
                ReadyObj.ready();
            }
        };
    }
    function ready( fn ) {
        // Attach the listeners
        ReadyObj.bindReady();

        var type = ReadyObj.type( fn );

        // Add the callback
        readyList.done( fn );//readyList is result of _Deferred()
    }
    return ready;
})();

Cách sử dụng:

<script>
    ready(function(){
        alert('It works!');
    });
    ready(function(){
        alert('Also works!');
    });
</script>

Tôi không chắc mã này có chức năng như thế nào, nhưng nó hoạt động tốt với các thử nghiệm hời hợt của tôi. Điều này mất khá nhiều thời gian, vì vậy tôi hy vọng bạn và những người khác có thể hưởng lợi từ nó.

PS.: Tôi đề nghị biên dịch nó.

Hoặc bạn có thể sử dụng http://dustindiaz.com/smallest-dompered-ever :

function r(f){/in/.test(document.readyState)?setTimeout(r,9,f):f()}
r(function(){/*code to run*/});

hoặc chức năng gốc nếu bạn chỉ cần hỗ trợ các trình duyệt mới (Không giống như jQuery đã sẵn sàng, điều này sẽ không chạy nếu bạn thêm chức năng này sau khi trang được tải)

document.addEventListener('DOMContentLoaded',function(){/*fun code to run*/})

Ba lựa chọn:

1. Nếu script là thẻ cuối cùng của phần thân, DOM sẽ sẵn sàng trước khi thẻ script thực thi
2. Khi DOM đã sẵn sàng, "readyState" sẽ thay đổi thành "hoàn thành"
3. Đặt mọi thứ trong trình nghe sự kiện 'DOMContentLoaded'

onreadystatechange

  document.onreadystatechange = function () {
     if (document.readyState == "complete") {
     // document is ready. Do your stuff here
   }
 }

Nguồn: MDN

DOMContentLoaded

document.addEventListener('DOMContentLoaded', function() {
   console.log('document is ready. I can sleep now');
});

Quan tâm đến các trình duyệt thời kỳ đồ đá: Chuyển đến mã nguồn jQuery và sử dụngreadyhàm. Trong trường hợp đó, bạn không phân tích cú pháp + thực thi toàn bộ thư viện, bạn chỉ đang thực hiện một phần rất nhỏ trong đó.

Đặt <script>/*JavaScript code*/</script>quyền của bạn trước khi đóng cửa </body> thẻ .

Phải thừa nhận rằng điều này có thể không phù hợp với mục đích của mọi người vì nó yêu cầu thay đổi tệp HTML thay vì chỉ làm một cái gì đó trong tệp JavaScript document.ready, nhưng vẫn ...

Giải pháp của người nghèo:

var checkLoad = function() {   
    document.readyState !== "complete" ? setTimeout(checkLoad, 11) : alert("loaded!");   
};  

checkLoad();  

Xem Fiddle

Tôi đã thêm cái này, tốt hơn một chút, tôi đoán, phạm vi riêng và không đệ quy

(function(){
    var tId = setInterval(function() {
        if (document.readyState == "complete") onComplete()
    }, 11);
    function onComplete(){
        clearInterval(tId);    
        alert("loaded!");    
    };
})()

Xem Fiddle

Tôi sử dụng cái này:

document.addEventListener("DOMContentLoaded", function(event) { 
    //Do work
});

Lưu ý: Điều này có lẽ chỉ hoạt động với các trình duyệt mới hơn, đặc biệt là các trình duyệt này: http://caniuse.com/#feat=domcontentloaded

Thực sự, nếu bạn chỉ quan tâm đến Internet Explorer 9+ , mã này sẽ đủ để thay thế jQuery.ready:

    document.addEventListener("DOMContentLoaded", callback);

Nếu bạn lo lắng về Internet Explorer 6 và một số trình duyệt thực sự lạ và hiếm, điều này sẽ hoạt động:

domReady: function (callback) {
    // Mozilla, Opera and WebKit
    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", callback, false);
        // If Internet Explorer, the event model is used
    } else if (document.attachEvent) {
        document.attachEvent("onreadystatechange", function() {
            if (document.readyState === "complete" ) {
                callback();
            }
        });
        // A fallback to window.onload, that will always work
    } else {
        var oldOnload = window.onload;
        window.onload = function () {
            oldOnload && oldOnload();
            callback();
        }
    }
},

Câu hỏi này đã được hỏi khá lâu rồi. Đối với bất cứ ai chỉ nhìn thấy câu hỏi này, bây giờ có một trang web gọi là "bạn có thể không cần jquery" bị hỏng - theo cấp độ hỗ trợ IE cần thiết - tất cả các chức năng của jquery và cung cấp một số thư viện nhỏ hơn, thay thế.

Theo kịch bản IE8, bạn có thể không cần jquery

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

Gần đây tôi đã sử dụng điều này cho một trang web di động. Đây là phiên bản đơn giản hóa của John Resig từ "Kỹ thuật JavaScript chuyên nghiệp". Nó phụ thuộc vào addEvent.

var ready = ( function () {
  function ready( f ) {
    if( ready.done ) return f();

    if( ready.timer ) {
      ready.ready.push(f);
    } else {
      addEvent( window, "load", isDOMReady );
      ready.ready = [ f ];
      ready.timer = setInterval(isDOMReady, 13);
    }
  };

  function isDOMReady() {
    if( ready.done ) return false;

    if( document && document.getElementsByTagName && document.getElementById && document.body ) {
      clearInterval( ready.timer );
      ready.timer = null;
      for( var i = 0; i < ready.ready.length; i++ ) {
        ready.ready[i]();
      }
      ready.ready = null;
      ready.done = true;
    }
  }

  return ready;
})();

Trình duyệt chéo (trình duyệt cũ cũng vậy) và một giải pháp đơn giản:

var docLoaded = setInterval(function () {
    if(document.readyState !== "complete") return;
    clearInterval(docLoaded);

    /*
        Your code goes here i.e. init()
    */
}, 30);

Hiển thị cảnh báo trong jsfiddle

Câu trả lời của jQuery khá hữu ích với tôi. Với một chút phản ứng, nó phù hợp với nhu cầu của tôi. Tôi hy vọng nó sẽ giúp bất cứ ai khác.

function onReady ( callback ){
    var addListener = document.addEventListener || document.attachEvent,
        removeListener =  document.removeEventListener || document.detachEvent
        eventName = document.addEventListener ? "DOMContentLoaded" : "onreadystatechange"

    addListener.call(document, eventName, function(){
        removeListener( eventName, arguments.callee, false )
        callback()
    }, false )
}

Đây là đoạn mã nhỏ nhất để kiểm tra DOM sẵn sàng hoạt động trên tất cả các trình duyệt (ngay cả IE 8):

r(function(){
    alert('DOM Ready!');
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

Xem câu trả lời này .

Chỉ cần thêm phần này vào cuối trang HTML của bạn ...

<script>
    Your_Function();
</script>

Bởi vì, các tài liệu HTML được phân tích cú pháp từ trên xuống dưới.

Rất đáng để tìm kiếm trong Rock Solid addEvent () và http://www.braksator.com/how-to-make-your-own-jquery .

Đây là mã trong trường hợp trang web bị sập

function addEvent(obj, type, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(type, fn, false);
        EventCache.add(obj, type, fn);
    }
    else if (obj.attachEvent) {
        obj["e"+type+fn] = fn;
        obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
        obj.attachEvent( "on"+type, obj[type+fn] );
        EventCache.add(obj, type, fn);
    }
    else {
        obj["on"+type] = obj["e"+type+fn];
    }
}

var EventCache = function(){
    var listEvents = [];
    return {
        listEvents : listEvents,
        add : function(node, sEventName, fHandler){
            listEvents.push(arguments);
        },
        flush : function(){
            var i, item;
            for(i = listEvents.length - 1; i >= 0; i = i - 1){
                item = listEvents[i];
                if(item[0].removeEventListener){
                    item[0].removeEventListener(item[1], item[2], item[3]);
                };
                if(item[1].substring(0, 2) != "on"){
                    item[1] = "on" + item[1];
                };
                if(item[0].detachEvent){
                    item[0].detachEvent(item[1], item[2]);
                };
                item[0][item[1]] = null;
            };
        }
    };
}();

// Usage
addEvent(window, 'unload', EventCache.flush);
addEvent(window, 'load', function(){alert("I'm ready");});

Mã trình duyệt chéo này sẽ gọi một hàm khi DOM đã sẵn sàng:

var domReady=function(func){
    var scriptText='('+func+')();';
    var scriptElement=document.createElement('script');
    scriptElement.innerText=scriptText;
    document.body.appendChild(scriptElement);
};

Đây là cách nó hoạt động:

1. Dòng đầu tiên domReadygọi toStringphương thức của hàm để có một chuỗi đại diện cho hàm bạn truyền vào và gói nó trong một biểu thức gọi hàm ngay lập tức.
2. Phần còn lại của việc domReadytạo một phần tử script với biểu thức và nối nó vào phần bodycủa tài liệu.
3. Trình duyệt chạy các thẻ script được nối vào bodysau khi DOM sẵn sàng.

Ví dụ: nếu bạn làm điều này : domReady(function(){alert();});, phần sau sẽ được thêm vào bodyphần tử:

 <script>(function (){alert();})();</script>

Lưu ý rằng điều này chỉ hoạt động cho các chức năng do người dùng xác định. Sau đây sẽ không hoạt động:domReady(alert);

Đó là năm 2020 và <script>thẻ có deferthuộc tính.

ví dụ:

<script src="demo_defer.js" defer></script>

nó xác định rằng tập lệnh được thực thi khi trang đã phân tích xong.

https://www.w3schools.com/tags/att_script_defer.asp

Làm thế nào về giải pháp này?

// other onload attached earlier
window.onload=function() {
   alert('test');
};

tmpPreviousFunction=window.onload ? window.onload : null;

// our onload function
window.onload=function() {
   alert('another message');

   // execute previous one
   if (tmpPreviousFunction) tmpPreviousFunction();
};

Luôn luôn tốt khi sử dụng các mã JavaScript tương đương so với jQuery. Một lý do là một thư viện ít phụ thuộc hơn và chúng nhanh hơn nhiều so với các tương đương jQuery.

Một tài liệu tham khảo tuyệt vời cho tương đương jQuery là http://youmightnotneedjquery.com/ .

Theo như câu hỏi của bạn, tôi đã lấy đoạn mã dưới đây từ liên kết trên :) Chỉ có một lời cảnh báo là nó chỉ hoạt động với Internet Explorer 9 trở lên.

function ready(fn) {
    if (document.readyState != 'loading') {
        fn();
    }
    else {
        document.addEventListener('DOMContentLoaded', fn);
    }
}

Tối thiểu và làm việc 100%

Tôi đã chọn câu trả lời từ PlainJS và nó hoạt động tốt với tôi. Nó mở rộng DOMContentLoadedđể nó có thể được chấp nhận ở tất cả các trình duyệt.

Hàm này tương đương với $(document).ready()phương thức của jQuery :

document.addEventListener('DOMContentLoaded', function(){
    // do something
});

Tuy nhiên, trái ngược với jQuery, mã này sẽ chỉ chạy đúng trong các trình duyệt hiện đại (IE> 8) và nó sẽ không trong trường hợp tài liệu đã được hiển thị tại thời điểm tập lệnh này được chèn (ví dụ: thông qua Ajax). Do đó, chúng ta cần mở rộng điều này một chút:

function run() {
    // do something
}

// in case the document is already rendered
if (document.readyState!='loading') run();
// modern browsers
else if (document.addEventListener) 
document.addEventListener('DOMContentLoaded', run);
// IE <= 8
else document.attachEvent('onreadystatechange', function(){
    if (document.readyState=='complete') run();
});

Điều này về cơ bản bao gồm tất cả các khả năng và là sự thay thế khả thi cho trình trợ giúp jQuery.

Chúng tôi đã tìm thấy một triển khai trình duyệt chéo nhanh và bẩn của chúng tôi có thể thực hiện thủ thuật cho hầu hết các trường hợp đơn giản với việc triển khai tối thiểu:

window.onReady = function onReady(fn){
    document.body ? fn() : setTimeout(function(){ onReady(fn);},50);
};

Các giải pháp setTimeout / setInterval được trình bày ở đây sẽ chỉ hoạt động trong các trường hợp cụ thể.

Vấn đề xuất hiện đặc biệt là trong các phiên bản Internet Explorer cũ hơn lên đến 8.

Các biến ảnh hưởng đến sự thành công của các giải pháp setTimeout / setInterval này là:

1) dynamic or static HTML
2) cached or non cached requests
3) size of the complete HTML document
4) chunked or non chunked transfer encoding

mã gốc (Javascript gốc) giải quyết vấn đề cụ thể này có ở đây:

https://github.com/dperini/ContentLoaded
http://javascript.nwbox.com/ContentLoaded (test)

đây là mã mà nhóm jQuery đã xây dựng triển khai của họ.

Đây là những gì tôi sử dụng, nó nhanh và bao gồm tất cả các cơ sở tôi nghĩ; hoạt động cho mọi thứ trừ IE <9.

(() => { function fn() {
    // "On document ready" commands:
    console.log(document.readyState);
};  
  if (document.readyState != 'loading') {fn()}
  else {document.addEventListener('DOMContentLoaded', fn)}
})();

Điều này dường như để bắt tất cả các trường hợp:

• kích hoạt ngay lập tức nếu DOM đã sẵn sàng (nếu DOM không "tải", nhưng "tương tác" hoặc "hoàn thành")
• nếu DOM vẫn đang tải, nó sẽ thiết lập một trình lắng nghe sự kiện khi DOM khả dụng (tương tác).

Sự kiện DOMContentLoaded có sẵn trong IE9 và mọi thứ khác, vì vậy cá nhân tôi nghĩ rằng sử dụng nó là ổn. Viết lại khai báo hàm mũi tên thành một hàm ẩn danh thông thường nếu bạn không dịch mã từ ES2015 sang ES5.

Nếu bạn muốn đợi cho đến khi tất cả các tài sản được tải, tất cả hình ảnh được hiển thị, v.v., sau đó sử dụng window.onload.

Nếu bạn không phải hỗ trợ các trình duyệt cũ, đây là một cách để làm điều đó ngay cả khi tập lệnh bên ngoài của bạn được tải với thuộc tính async :

HTMLDocument.prototype.ready = new Promise(function(resolve) {
   if(document.readyState != "loading")
      resolve();
   else
      document.addEventListener("DOMContentLoaded", function() {
         resolve();
      });
});

document.ready.then(function() {
   console.log("document.ready");
});

Dành cho IE9 +:

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

Nếu bạn đang tải jQuery ở gần cuối BODY, nhưng gặp sự cố với mã ghi ra jQuery (<func>) hoặc jQuery (tài liệu). Đã (<func>), hãy xem jqShim trên Github.

Thay vì tạo lại chức năng sẵn sàng tài liệu của riêng mình, nó chỉ đơn giản giữ các chức năng cho đến khi jQuery có sẵn sau đó tiến hành với jQuery như mong đợi. Điểm di chuyển jQuery xuống dưới cùng của cơ thể là tăng tốc độ tải trang và bạn vẫn có thể hoàn thành nó bằng cách đặt nội dung jqShim.min.js vào đầu mẫu của bạn.

Cuối cùng tôi đã viết mã này để chuyển tất cả các tập lệnh trong WordPress sang chân trang và chỉ mã shim này hiện nằm ngay trong tiêu đề.

Thử cái này:

function ready(callback){
    if(typeof callback === "function"){
        document.addEventListener("DOMContentLoaded", callback);
        window.addEventListener("load", callback);
    }else{
        throw new Error("Sorry, I can not run this!");
    }
}
ready(function(){
    console.log("It worked!");
});

function onDocReady(fn){ 
    $d.readyState!=="loading" ? fn():document.addEventListener('DOMContentLoaded',fn);
}

function onWinLoad(fn){
    $d.readyState==="complete") ? fn(): window.addEventListener('load',fn);
} 

onDocReady cung cấp một cuộc gọi lại khi dom HTML sẵn sàng truy cập / phân tích / thao tác đầy đủ.

onWinLoad cung cấp một cuộc gọi lại khi mọi thứ đã được tải (hình ảnh, v.v.)

• Các chức năng này có thể được gọi bất cứ khi nào bạn muốn.
• Hỗ trợ nhiều "người nghe".
• Sẽ hoạt động trong mọi trình duyệt.

(function(f){
  if(document.readyState != "loading") f();
  else document.addEventListener("DOMContentLoaded", f);
})(function(){
  console.log("The Document is ready");
});

Hầu hết các hàm vanilla JS Ready KHÔNG xem xét kịch bản nơi DOMContentLoadedtrình xử lý được đặt sau khi tài liệu đã được tải - Điều đó có nghĩa là hàm sẽ không bao giờ chạy . Điều này có thể xảy ra nếu bạn tìm kiếm DOMContentLoadedtrong một asynctập lệnh bên ngoài ( <script async src="file.js"></script>).

Mã dưới đây chỉ kiểm tra DOMContentLoadednếu tài liệu readyStatechưa interactivehoặc complete.

var DOMReady = function(callback) {
  document.readyState === "interactive" || document.readyState === "complete" ? callback() : document.addEventListener("DOMContentLoaded", callback());
};
DOMReady(function() {
  //DOM ready!
});

Nếu bạn muốn hỗ trợ IE cũng như:

var DOMReady = function(callback) {
    if (document.readyState === "interactive" || document.readyState === "complete") {
        callback();
    } else if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', callback());
    } else if (document.attachEvent) {
        document.attachEvent('onreadystatechange', function() {
            if (document.readyState != 'loading') {
                callback();
            }
        });
    }
};

DOMReady(function() {
  // DOM ready!
});

Tôi chỉ đơn giản là sử dụng:

setTimeout(function(){
    //reference/manipulate DOM here
});

Và không giống document.addEventListener("DOMContentLoaded" //etcnhư trong câu trả lời hàng đầu, nó hoạt động xa như IE9 - http://caniuse.com/#search=DOMContentLoaded chỉ biểu thị gần đây như IE11.

Thật thú vị, tôi đã vấp phải setTimeoutgiải pháp này vào năm 2009: Có phải việc kiểm tra mức độ sẵn sàng của DOM quá mức không?, điều có lẽ có thể được diễn đạt tốt hơn một chút, vì ý tôi là "việc sử dụng các cách tiếp cận phức tạp hơn của các khung khác nhau để kiểm tra mức độ sẵn sàng của DOM" là quá mức cần thiết.

Giải thích tốt nhất của tôi về lý do tại sao kỹ thuật này hoạt động là, khi tập lệnh có setTimeout như vậy đã đạt được, DOM ở giữa bị phân tích cú pháp, do đó việc thực thi mã trong setTimeout bị hoãn lại cho đến khi hoạt động đó kết thúc.