මා සතුව පිටපතක් තිබේ $(document).ready , නමුත් එය jQuery වෙතින් වෙනත් කිසිවක් භාවිතා නොකරයි. JQuery යැපීම ඉවත් කිරීමෙන් එය සැහැල්ලු කිරීමට මම කැමතියි.

$(document).readyJQuery භාවිතා නොකර මගේම ක්‍රියාකාරිත්වය ක්‍රියාත්මක කරන්නේ කෙසේද? සියලු රූප, රාමු ආදිය පැටවූ පසු ගින්නක් ඇතිවීම භාවිතා window.onloadකිරීම සමාන නොවන බව මම දනිමි window.onload.

IE8 නොවුනත්, ප්‍රමිති මත පදනම් වූ ප්‍රතිස්ථාපනයක් ඇත, DOMContentLoadedඑය බ්‍රව්සර් වලින් 98% කට වඩා සහාය දක්වයි :

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 සඳහා ශක්‍ය ආදේශකයක්

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

සිට ගෙන https://plainjs.com/javascript/events/running-code-when-the-document-is-ready-15/

මෙහි තවත් හොඳ domReady ශ්‍රිතයක් https://stackoverflow.com/a/9899701/175071 වෙතින් ලබාගෙන ඇත

පිළිගත් පිළිතුර සම්පුර්ණයෙන්ම දුරස් වූ හෙයින්, මම jQuery.ready()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;
})();

භාවිතා කරන්නේ කෙසේද:

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

මෙම කේතය කෙතරම් ක්‍රියාකාරීදැයි මට විශ්වාස නැත, නමුත් එය මගේ මතුපිට පරීක්ෂණ සමඟ හොඳින් ක්‍රියාත්මක විය. මේ සඳහා සෑහෙන කාලයක් ගත විය, එබැවින් ඔබටත් අනෙක් අයටත් එයින් ප්‍රයෝජන ගත හැකි යැයි මම විශ්වාස කරමි.

PS: මම යෝජනා කරනවා එය සම්පාදනය කරන්න .

නැතහොත් ඔබට http://dustindiaz.com/smallest-domready-ever භාවිතා කළ හැකිය :

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

හෝ ස්වදේශීය ශ්‍රිතය ඔබට නව බ්‍රව්සර් සඳහා සහය දැක්වීමට පමණක් අවශ්‍ය නම් (jQuery සූදානම් මෙන් නොව, පිටුව පූරණය වූ පසු ඔබ මෙය එකතු කළහොත් මෙය ක්‍රියාත්මක නොවේ)

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

විකල්ප තුනක්:

1. නම් scriptශරීරයේ පසුගිය ටැගය වන අතර DOM තිර රචනය ටැගය ඉටු පෙර සූදානම් වනු ඇත
2. DOM සූදානම් වූ විට, "readyState" "සම්පූර්ණ" ලෙස වෙනස් වේ
3. සෑම දෙයක්ම 'DOMContentLoaded' සිදුවීම් සවන්දෙන්නන් යටතේ තබන්න

onreadystatechange

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

මුලාශ්‍රය: එම්.ඩී.එන්

DOMContentLoaded

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

ගල් යුගයේ බ්‍රව්සර් ගැන සැලකිලිමත්: jQuery ප්‍රභව කේතය වෙත ගොස්readyශ්‍රිතයභාවිතා කරන්න. එවැනි අවස්ථාවක ඔබ විග්‍රහ කරන්නේ නැත + ඔබ කරන මුළු පුස්තකාලයම ක්‍රියාත්මක කරන්නේ එහි ඉතා සුළු කොටසක් පමණි.

අවසාන ටැගයට පෙර ඔබේ <script>/*JavaScript code*/</script>දකුණ තබන්න . </body>

ජාවාස්ක්‍රිප්ට් ගොනුවේ යමක් කිරීම වෙනුවට HTML ගොනුව වෙනස් කිරීම අවශ්‍ය බැවින් මෙය සෑම දෙනාගේම අරමුණු වලට නොගැලපෙන බව පිළිගත යුතුය document.ready, නමුත් තවමත් ...

දුප්පත් මිනිසාගේ විසඳුම:

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

checkLoad();  

ෆිදෙල් බලන්න

මෙය එකතු කිරීම, මම අනුමාන කිරීම, වඩා හොඳ විෂය පථයක් සහ පුනරාවර්තන නොවන

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

ෆිදෙල් බලන්න

මම මෙය භාවිතා කරමි:

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

සටහන: මෙය බොහෝ විට ක්‍රියාත්මක වන්නේ නව බ්‍රව්සර් සමඟ පමණි, විශේෂයෙන් මේවා: http://caniuse.com/#feat=domcontentloaded

ඇත්ත වශයෙන්ම, ඔබ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 9+ ගැන පමණක් සැලකිලිමත් වන්නේ නම්, මෙම කේතය ප්‍රතිස්ථාපනය කිරීමට ප්‍රමාණවත් වේ jQuery.ready:

    document.addEventListener("DOMContentLoaded", callback);

ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 6 සහ සමහර අමුතු හා දුර්ලභ බ්‍රව්සර් ගැන ඔබ කරදර වන්නේ නම් , මෙය ක්‍රියාත්මක වනු ඇත:

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

මෙම ප්‍රශ්නය බොහෝ කලකට පෙර විමසන ලදි. මෙම ප්‍රශ්නය දකින ඕනෑම කෙනෙකුට, දැන් ඔබට "ඔබට jquery අවශ්‍ය නොවනු ඇත" යනුවෙන් වෙබ් අඩවියක් ඇත ඇත - අවශ්‍ය IE සහය මට්ටම අනුව - jquery හි සියලු ක්‍රියාකාරීත්වය සහ විකල්ප කුඩා පුස්තකාල කිහිපයක් සපයයි.

ඔබට අනුව IE8 ලේඛනය සූදානම් ස්ක්‍රිප්ටයට 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();
        });
}

මම මෑතකදී මෙය ජංගම වෙබ් අඩවියක් සඳහා භාවිතා කරමින් සිටියෙමි. මෙය ජෝන් රෙසිග්ගේ "ප්‍රෝ ජාවාස්ක්‍රිප්ට් ටෙක්නික්ස්" හි සරල කළ අනුවාදයයි. එය 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;
})();

හරස් බ්‍රව්සරය (පැරණි බ්‍රව්සර් ද) සහ සරල විසඳුමක්:

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

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

Jsfiddle හි ඇඟවීම් පෙන්වයි

JQuery පිළිතුර මට සෑහෙන්න ප්‍රයෝජනවත් විය. කුඩා පරාවර්තකයකින් එය මගේ අවශ්‍යතාවන්ට හොඳින් ගැලපේ. එය වෙනත් ඕනෑම කෙනෙකුට උපකාරී වනු ඇතැයි මම බලාපොරොත්තු වෙමි.

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

සියලුම බ්‍රව්සර් හරහා ක්‍රියාත්මක වන DOM සූදානම් බව පරීක්ෂා කිරීම සඳහා කුඩාම කේත ස්නිපටය මෙන්න (IE 8 පවා):

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

මෙම පිළිතුර බලන්න .

මෙය ඔබගේ HTML පිටුවේ පහළට එක් කරන්න ...

<script>
    Your_Function();
</script>

මන්ද, HTML ලේඛන ඉහළ-පහළින් විග්‍රහ කර ඇත.

රොක් Sol න addEvent () සහ http://www.braksator.com/how-to-make-your-own-jquery හි බැලීම වටී .

වෙබ් අඩවිය පහළට ගියහොත් කේතය මෙන්න

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

එය 2020 වසර වන අතර <script>ටැගය deferආරෝපණය කර ඇත .

උදාහරණයක් වශයෙන්:

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

පිටුව විග්‍රහ කිරීම අවසන් වූ විට ස්ක්‍රිප්ට් ක්‍රියාත්මක වන බව එය නියම කරයි.

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

මෙම හරස් බ්‍රව්සර් කේතය DOM සූදානම් වූ පසු ශ්‍රිතයක් කැඳවනු ඇත:

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

එය ක්‍රියාත්මක වන ආකාරය මෙන්න:

1. domReadyඇමතුම් පේළියේ පළමු පේළියtoString ඔබ ක්‍රියා කරන ශ්‍රිතයේ තන්තු නිරූපණයක් ලබා ගැනීම සඳහා ශ්‍රිතයේ ක්‍රමවේදය එය වහාම ශ්‍රිතය ලෙස හඳුන්වන ප්‍රකාශනයකින් ඔතා ඇත.
2. ඉතිරි කොටස domReadyප්‍රකාශනය සමඟ ස්ක්‍රිප්ට් අංගයක් නිර්මාණය කර එය bodyලේඛනයට එකතු කරයි.
3. බ්‍රව්සරය bodyDOM සූදානම් වූ පසු එකතු කරන ලද ස්ක්‍රිප්ට් ටැග් ක්‍රියාත්මක කරයි.

උදාහරණයක් ලෙස, ඔබ මෙය කරන්නේ නම් : domReady(function(){alert();});, පහත සඳහන් bodyඅංගයට එකතු වේ:

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

මෙය ක්‍රියාත්මක වන්නේ පරිශීලක අර්ථ දක්වන ලද කාර්යයන් සඳහා පමණක් බව සලකන්න. පහත සඳහන් දෑ ක්‍රියා නොකරනු ඇත:domReady(alert);

බොහෝ අවම සහ 100% වැඩ

මම ප්ලේන් ජේඑස් වෙතින් පිළිතුර තෝරාගෙන ඇති අතර එය මට හොඳින් ක්‍රියාත්මක වේ. එය DOMContentLoadedසියලු බ්‍රව්සර්වල පිළිගත හැකි වන පරිදි විහිදේ .

මෙම ශ්‍රිතය jQuery $(document).ready()ක්‍රමයට සමාන වේ :

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

කෙසේ වෙතත්, jQuery ට වෙනස්ව, මෙම කේතය නිසියාකාරව ක්‍රියාත්මක වන්නේ නවීන බ්‍රව්සර්වල පමණි (IE> 8) සහ මෙම ස්ක්‍රිප්ට් එක ඇතුළත් කරන අවස්ථාවේ දී ලේඛනය දැනටමත් විදහා දක්වනු ලැබුවහොත් (උදා: අජැක්ස් හරහා). එමනිසා, අපි මෙය ටිකක් දිගු කළ යුතුයි:

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

මෙය මූලික වශයෙන් සියලු හැකියාවන් ආවරණය කරන අතර jQuery සහායකයා සඳහා ශක්‍ය ආදේශකයක් වේ.

මෙම විසඳුම ගැන කුමක් කිව හැකිද?

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

JQuery හා සසඳන විට ජාවාස්ක්‍රිප්ට් සමාන භාවිතා කිරීම සැමවිටම හොඳයි. එක් හේතුවක් මත යැපීමට ඇති අඩු පුස්තකාලයක් වන අතර ඒවා jQuery සමානකම් වලට වඩා වේගවත් වේ.

JQuery සමානකම් සඳහා එක් අපූරු සඳහනක් වන්නේ http://youmightnotneedjquery.com/ .

ඔබේ ප්‍රශ්නය සම්බන්ධයෙන් ගත් කල, මම පහත සබැඳිය ඉහත සබැඳියෙන් ලබා ගත්තෙමි :) එය අවලංගු වන්නේ එය ක්‍රියාත්මක වන්නේ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 9 හා පසුව පමණි.

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

අප විසින් ඉක්මන් හා අපිරිසිදු හරස් බ්‍රව්සරයක් ක්‍රියාත්මක කිරීම සොයාගෙන ඇති අතර එමඟින් අවම ක්‍රියාවලියක් සමඟ වඩාත් සරල අවස්ථා සඳහා උපක්‍රමය කළ හැකිය:

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

මෙහි ඉදිරිපත් කර ඇති setTimeout / setInterval විසඳුම් ක්‍රියාත්මක වන්නේ නිශ්චිත තත්වයන් යටතේ පමණි.

මෙම ගැටළුව විශේෂයෙන් පැරණි ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් අනුවාද 8 හි දක්වා ඇත.

මෙම setTimeout / setInterval විසඳුම් වල සාර්ථකත්වයට බලපාන විචල්‍යයන්:

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

මෙම විශේෂිත ගැටළුව විසඳන මුල් (ස්වදේශීය ජාවාස්ක්‍රිප්ට්) කේතය මෙහි ඇත:

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

jQuery කණ්ඩායම විසින් ඒවා ක්‍රියාත්මක කිරීම ගොඩනගා ඇති කේතය මෙයයි.

මෙන්න මම භාවිතා කරන දේ, එය වේගවත් වන අතර මා සිතන සියලු පදනම් ආවරණය කරයි; IE <9 හැර අනෙක් සියල්ල සඳහා ක්‍රියා කරයි.

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

මෙය සියලු අවස්ථා අල්ලා ගන්නා බව පෙනේ:

• DOM දැනටමත් සුදානම් නම් වහාම වෙඩි තබයි (DOM "පැටවීම" නොවේ නම්, නමුත් "අන්තර්ක්‍රියාකාරී" හෝ "සම්පූර්ණ")
• DOM තවමත් පූරණය වෙමින් පවතී නම්, එය DOM ලබා ගත හැකි විට (අන්තර්ක්‍රියාකාරී) සිදුවීම් සවන්දෙන්නෙකු සකසයි.

DOMContentLoaded සිද්ධිය IE9 සහ අනෙක් සියල්ලෙන් ලබා ගත හැකිය, එබැවින් මම පෞද්ගලිකව සිතන්නේ මෙය භාවිතා කිරීම සුදුසු බවය. ඔබ ඔබේ කේතය ES2015 සිට ES5 වෙත සම්ප්‍රේෂණය නොකරන්නේ නම් ඊතල ශ්‍රිත ප්‍රකාශය සාමාන්‍ය නිර්නාමික ශ්‍රිතයකට නැවත ලියන්න.

සියලුම වත්කම් පූරණය වන තෙක් බලා සිටීමට ඔබට අවශ්‍ය නම්, සියලුම පින්තූර පෙන්වනු ලැබේ. ඉන්පසු window.onload භාවිතා කරන්න.

ඔබට ඉතා පැරණි බ්‍රව්සර් සඳහා සහය දැක්වීමට අවශ්‍ය නැතිනම්, ඔබේ බාහිර ස්ක්‍රිප්ට් අසින්ක් ගුණාංගයෙන් පටවා ඇති විට පවා එය කළ හැකි ක්‍රමයක් මෙන්න :

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

IE9 + සඳහා:

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

ඔබ BODY හි පතුල අසල jQuery පූරණය කරන්නේ නම්, නමුත් jQuery (<func>) හෝ jQuery (ලේඛනය) ලියන කේත සමඟ ගැටළුවක් තිබේ නම්. සූදානම් (<func>), ගිතුබ් හි jqShim බලන්න .

තමන්ගේම ලේඛනයක් සූදානම් ශ්‍රිතයක් ප්‍රතිනිර්මාණය කරනවා වෙනුවට, jQuery ලබා ගත හැකි වන තෙක් එය ශ්‍රිතයන් මත රඳවා තබාගෙන අපේක්ෂිත පරිදි jQuery සමඟ ඉදිරියට යයි. JQuery ශරීරයේ පහළට ගෙන යාමේ ලක්ෂ්‍යය වන්නේ පිටු පැටවීම වේගවත් කිරීමයි, ඔබේ අච්චුවේ ප්‍රධාන කොටසේ jqShim.min.js ඇතුළත් කිරීමෙන් ඔබට එය තවමත් ඉටු කළ හැකිය.

වර්ඩ්ප්‍රෙස් හි ඇති සියලුම ස්ක්‍රිප්ට් චලනය කිරීම සඳහා මම මෙම කේතය ලිවීම අවසන් කළෙමි පාදකය කළ අතර, මෙම ෂිම් කේතය දැන් කෙලින්ම ශීර්ෂයේ වාඩි වී සිටී.

මේක උත්සාහ කරන්න:

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

HTML ඩොම් සම්පූර්ණයෙන්ම ප්‍රවේශ වීමට / විග්‍රහ කිරීමට / හැසිරවීමට සූදානම් වන විට onDocReady ඇමතුමක් ලබා දෙයි.

සෑම දෙයක්ම පටවා ඇති විට onWinLoad ඇමතුමක් ලබා දෙයි (පින්තූර ආදිය)

• ඔබට අවශ්‍ය විටෙක මෙම කාර්යයන් හැඳින්විය හැකිය.
• බහු "සවන්දෙන්නන්ට" සහය දක්වයි.
• ඕනෑම බ්‍රව්සරයක ක්‍රියා කරයි.

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

බොහෝ වැනිලා ජේඑස් සූදානම් කාර්යයන් ලේඛනය දැනටමත් පටවා DOMContentLoadedඇති පසු හසුරුවන්නා සකසා ඇති අවස්ථාව සලකා බලන්නේ නැත - එයින් අදහස් වන්නේ ශ්‍රිතය කිසි විටෙකත් ක්‍රියාත්මක නොවන බවයි. ඔබ බාහිර පිටපතක් DOMContentLoadedතුළ සොයන්නේ නම් මෙය සිදුවිය හැකිය async(<script async src="file.js"></script> ) .

පහත කේතය පරික්ෂා DOMContentLoadedකරන්නේ ලේඛනයේ readyStateදැනටමත් නොමැති නම් interactiveහෝ complete.

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

ඔබට IE අස්වෙල්ට සහාය වීමට අවශ්‍ය නම්:

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

මම සරලව භාවිතා කරන්නේ:

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

document.addEventListener("DOMContentLoaded" //etcඉහළම පිළිතුර මෙන් නොව , එය IE9 තරම් back තට දිව යයි - http://caniuse.com/#search=DOMContentLoaded තරම් back තට පෙන්නුම් කරන්නේ මෑතකදී IE11 තරම් පමණි.

සිත්ගන්නා කරුණ නම්, මම setTimeout2009 දී මෙම විසඳුමට බාධා කළෙමි : DOM අතිරික්තයේ සූදානම පරීක්ෂා කිරීමද?, බොහෝ විට එය තරමක් හොඳ වචන වලින් පැවසිය හැකිය, මා අදහස් කළ පරිදි, “DOM හි සූදානම පරීක්ෂා කිරීම සඳහා විවිධ රාමු වල වඩාත් සංකීර්ණ ප්‍රවේශයන් භාවිතා කිරීම අතිරික්තයක් ද?”

මෙම තාක්‍ෂණය ක්‍රියාත්මක වන්නේ ඇයිද යන්න පිළිබඳ මගේ හොඳම පැහැදිලි කිරීම නම්, එවැනි සෙට් ටයිම out ට් එකක් සහිත ස්ක්‍රිප්ට් එක ළඟා වූ විට, ඩීඑම් විග්‍රහ කර ඇති අතර, එම නිසා එම ක්‍රියාව අවසන් වන තුරු සෙට් ටයිමූට් තුළ කේතය ක්‍රියාත්මක කිරීම කල් දමනු ලැබේ.