javascript $ (নথি)। jQuery ছাড়া ইতিমধ্যে সমতুল্য




15 Answers

সম্পাদনা:

এখানে 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/ থেকে নেওয়া

এখানে আরেকটি ভাল ডোমেডি ফাংশন https://stackoverflow.com/a/9899701/175071 থেকে নেওয়া হয়েছে

গৃহীত উত্তরটি সম্পূর্ণ থেকে অনেক দূরে ছিল, আমি jQuery.ready() মত "প্রস্তুত" ফাংশনটি 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>

আমি নিশ্চিত নই যে এই কোডটি কীভাবে কার্যকরী হয়, তবে এটি আমার পৃষ্ঠীয় পরীক্ষাগুলির সাথে জরিমানা করে। এটি বেশ কিছু সময় নিয়েছে, তাই আমি আশা করি আপনি এবং অন্যদের এটি থেকে উপকৃত হতে পারেন।

পিএস .: আমি এটা compiling সুপারিশ।

অথবা আপনি http://dustindiaz.com/smallest-domready-ever ব্যবহার করতে পারেন:

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

বা স্থানীয় ফাংশনটি যদি শুধুমাত্র নতুন ব্রাউজারগুলিকে সমর্থন করতে হয় তবে (জাভাস্ক্রিপ্ট প্রস্তুতের বিপরীতে, পৃষ্ঠাটি লোড হওয়ার পরে এটি যোগ করলে এটি চলবে না)

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

আমার কাছে একটি স্ক্রিপ্ট আছে যা $(document).ready ব্যবহার করে। ইতিমধ্যে, কিন্তু এটি jQuery থেকে অন্য কিছু ব্যবহার করে না। আমি jQuery নির্ভরতা মুছে ফেলার মাধ্যমে এটি হালকা করতে চাই।

কিভাবে আমি আমার নিজস্ব $(document).ready বাস্তবায়ন করতে পারেন। ইতিমধ্যে jQuery ব্যবহার না করে কার্যকারিতা? আমি জানি যে window.onload ব্যবহার করা একই রকম নয়, window.onload মতো। সব ছবি, ফ্রেম, ইত্যাদি লোড হওয়ার পরে আগুন।




ক্লোজিং </body> ট্যাগের আগে আপনার <script>/*JavaScript code*/</script> ঠিক রাখুন।

অবশ্যই, এটি প্রত্যেকের উদ্দেশ্যে উপযুক্ত নয় কারণ এটি কেবলমাত্র জাভাস্ক্রিপ্ট ফাইলটিতে একটি কিছু নথির পরিবর্তে HTML ফাইল পরিবর্তন করার প্রয়োজন। ইতিমধ্যে, কিন্তু ...




আমি এই ব্যবহার

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

দ্রষ্টব্য: এটি সম্ভবত শুধুমাত্র নতুন ব্রাউজারগুলির সাথে কাজ করে, বিশেষ করে: http://caniuse.com/#feat=domcontentloaded




এই প্রশ্ন বেশ দীর্ঘ সময় আগে জিজ্ঞাসা করা হয়। যে কেউ এই প্রশ্নটি দেখার জন্য, এখন এমন একটি সাইট রয়েছে যা বলা হয় "জাভাসি প্রয়োজন নেই" যা ভেঙ্গে যায় - 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();
        });
}



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

এই answer দেখুন।




DOM প্রস্তুত হওয়ার পরে এই ক্রস ব্রাউজার কোড একটি ফাংশন কল করবে:

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

এখানে কিভাবে এটা কাজ করে:

  1. domReady এর প্রথম লাইনটি domReady পদ্ধতিটিকে আপনার ফাংশনটির একটি স্ট্রিং উপস্থাপনা পেতে কল করে এবং এটি এমন অভিব্যক্তিতে আবদ্ধ করে যা অবিলম্বে ফাংশনটি কল করে।
  2. বাকি domReady এক্সপ্রেশন সহ একটি স্ক্রিপ্ট উপাদান তৈরি করে এবং domReady body সাথে যুক্ত করে।
  3. DOM প্রস্তুত হওয়ার পরে ব্রাউজারটি স্ক্রিপ্ট ট্যাগকে যুক্ত করে।

উদাহরণস্বরূপ, যদি আপনি এটি করেন: domReady(function(){alert();}); , body উপাদান যোগ করা হবে:

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

উল্লেখ্য যে এটি শুধুমাত্র ব্যবহারকারী-সংজ্ঞায়িত ফাংশনগুলির জন্য কাজ করে। নিম্নলিখিত কাজ করবে না: domReady(alert);




কিভাবে এই সমাধান সম্পর্কে?

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



আমি কেবল ব্যবহার করি:

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

এবং document.addEventListener("DOMContentLoaded" //etc মতো খুব উপরের উত্তর হিসাবে, এটি IE9 হিসাবে যতদূর কাজ করে - http://caniuse.com/#search=DOMContentLoaded শুধুমাত্র IE11 হিসাবেই ইঙ্গিত দেয়।

উদাহরণস্বরূপ, https://netrenderer.com/index.php যান, ড্রপডাউন থেকে ইন্টারনেট এক্সপ্লোরার 9 নির্বাচন করুন, https://dexygen.github.io/blog/oct-2017/jekyll/jekyll-categories/liquid-templates/2017/10/22/how-jekyll-builds-site-categories.html এবং "রেন্ডার" ক্লিক করুন এবং আপনি এই পোস্টের নীচে স্ক্রিনশটের মতো কিছু দেখতে পাবেন।

Jekyll "হ্যাকার" থিমটি আমার পছন্দের ক্ষেত্রে স্টাইলের ম্যানিপুলেশনটি কাজে লাগানোর জন্য নিম্নোক্ত জাভাস্ক্রিপ্ট কোডটি ব্যবহার করছি - বিশেষ করে আপনি if (location.pathname !== rootPath) ব্লকটি উল্লেখ করতে পারি if (location.pathname !== rootPath) আমি কীভাবে if (location.pathname !== rootPath) Home এবং Blog Home লিঙ্ক, যা Net9enderer সাইটের প্রতি IE9 দ্বারা প্রদর্শিত হচ্ছে।

আকর্ষণীয়ভাবে আমি ২009 সালে এই সেট setTimeout সমাধানটির দিকে setTimeout : DOM overkill এর প্রস্তুতির জন্য কি চেক করা হচ্ছে? , যা হয়ত সম্ভবত সামান্য ভাল শব্দ বলা যেতে পারে, যেমনটি আমি বিভিন্ন কাঠামোর 'আরও জটিল পদ্ধতি ব্যবহার করে বোঝাতে চেয়েছি।

setTimeout(function() {//delay execution until after dom is parsed
    var containerEls = document.getElementsByClassName('container');
    var headingEl = containerEls[0].getElementsByTagName('h1')[0];
    var headerEl = document.getElementsByTagName('header')[0];
    var downloadsSectionEl = document.getElementById('downloads');
    var rootPath = "/";
    var blogRootPath = "/blog/";

    containerEls[0].style.maxWidth = '800px';
    containerEls[1].style.maxWidth = '800px';
    headingEl.style.margin = '0';
    headerEl.style.marginBottom = '7px';
    downloadsSectionEl.style.margin = '0';

    if (location.pathname !== rootPath) {
        downloadsSectionEl.appendChild(generateNavLink('Home', rootPath));
        if (location.pathname !== blogRootPath) {
            downloadsSectionEl.appendChild(document.createTextNode(' | '));
            downloadsSectionEl.appendChild(generateNavLink('Blog Home', blogRootPath));
        }
    }

    function generateNavLink(linkText, hrefPath) {
        var navLink = document.createElement('a');
        var linkTextNode = document.createTextNode(linkText);
        navLink.setAttribute('href', hrefPath);
        navLink.appendChild(linkTextNode);
        return navLink;
    }
});




এখানে উপস্থাপন করা 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 টিম তাদের বাস্তবায়ন তৈরি করেছে।




আপনার যদি পুরানো ব্রাউজারগুলিকে সমর্থন করা না হয় তবে আপনার বহিরাগত স্ক্রিপ্টটি অ্যাসাইন বৈশিষ্ট্যের সাথে লোড হওয়ার পরেও এটি করার উপায় এখানে রয়েছে :

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



যদি আপনি BODY এর নীচে jQuery লোড করছেন, তবে jQuery (<func>) বা jQuery (দস্তাবেজ) লিখেছেন এমন কোডটি নিয়ে সমস্যা হচ্ছে। ইতিমধ্যে (<func>), jqShim

পরিবর্তে নিজস্ব ডকুমেন্ট প্রস্তুত ফাংশন পুনঃপ্রতিষ্ঠিত করার জন্য, jQuery কেবল উপলব্ধ না হওয়া পর্যন্ত এটি কেবল ফাংশনগুলির দিকে ঝুলতে থাকে তবে প্রত্যাশিত হিসাবে jQuery এর সাথে আয় করে। শরীরের নিচের অংশে jQuery সরানোর বিন্দুটি পৃষ্ঠা লোডটি দ্রুততর করা এবং আপনি এখনও আপনার টেমপ্লেটটির শিরোনামে jqShim.min.js কে ইনলাইন করে এটি সম্পাদন করতে পারেন।

আমি WordPress সমস্ত স্ক্রিপ্টকে পাদচরণে সরানোর জন্য এই কোডটি লিখে শেষ করেছি , এবং এই শিম কোডটি এখন সরাসরি শিরোনামটিতে বসে আছে।




প্রস্তুত ফাংশন jQueryএকটি সংখ্যা আছে। সত্যি, আমি আপনার ওয়েবসাইট থেকে আশ্চর্যজনক ছোট আউটপুট আছে না হওয়া পর্যন্ত এটি প্রতিস্থাপন যে বিন্দু দেখতে না। jQueryএকটি সুন্দর ছোট গ্রন্থাগার, এবং এটি পরে আপনার প্রয়োজন হবে ক্রস ব্রাউজার জিনিস সব ধরণের পরিচালনা করে।

যাইহোক, এখানে পোস্ট করার সামান্য বিন্দু আছে, শুধু খুলুন jQueryএবং তাকানbindReady পদ্ধতিটি দেখুন।

এটি document.addEventListener("DOMContentLoaded")বা document.attachEvent('onreadystatechange')ইভেন্ট মডেলের উপর নির্ভর করে কল করে শুরু হয় এবং সেখানে থেকে যায়।




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

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

এইচটিএমএল ডম সম্পূর্ণরূপে অ্যাক্সেস / পার্স / ম্যানিপুলেশন করার জন্য প্রস্তুত হলে onDocReady একটি কলব্যাক প্রদান করে।

সবকিছু লোড করা হয়েছে যখন onWinLoad একটি callback প্রদান করে (ইমেজ ইত্যাদি)

  • আপনি চান যখন এই ফাংশন বলা যেতে পারে।
  • একাধিক "শ্রোতা" সমর্থন করে।
  • কোন ব্রাউজারে কাজ করবে।



Internet Explorer 8 সমর্থন করার জন্য @ ডুসকউফ সম্পাদনার সম্পাদনাও । পার্থক্যটি রেজেক্সের ফাংশন পরীক্ষা এবং একটি বেনামী ফাংশন সহ সেটটাইমআউটের জন্য একটি নতুন কল।

এছাড়াও, আমি টাইমআউট 99 সেট।

function ready(f){/in/.test(document.readyState)?setTimeout(function(){ready(f);},99):f();}



Related