شبیه سازی document.ready با Javascript خالص

دسته بندی: آموزش
زمان مطالعه: 2 دقیقه
۳۰ خرداد ۱۳۹۷

همونطور که اطلاع دارید در jQuary می‌تونیم از $(document).ready استفاده کنیم تا بفهمیم که DOM چه زمانی بصورت کامل آماده شده است. اما در این مطلب قصد داریم که روش هایی رو برای شبیه سازی $(document).ready با Javascript خالص معرفی کنیم تا دیگه لازم نباشه که از jQuery استفاده کنیم.

یکی از روش‌ها استفاده از window.onload هست، اما دقیقا عملکرد یکسانی ندارند. زیرا window.onload زمانی فراخوانی میشه که تمامی تصاویر و فریم‌ها و ... load شده باشن ولی ما اینجا فقط میخوایم بفهمیم که DOM چه زمانی آماده هست و نیاز نداریم که همه چیز لود شده باشه.

DOMContentLoaded نیز یک روش استاندارد از پیش تعریف شده هست که می‌تونه جایگزین خوبی برای $(document).ready باشه که حدود 98% مرورگرها از اون پشتیبانی می‌کنن اما مشکل اینجاست که توسط مرورگرهای قدیمی مانند IE8 پشتیبانی نمیشه. برای استفاده از این رویداد بصورت زیر استفاده میکنیم:

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

از کد زیر می‌تونید به عنوان روش جایگزین دیگه ای استفاده کنید. در ابتدا یک تابع بنام ready میسازیم و کدهای زیر رو درونش قرار میدیم:

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/ گرفته شده است.

اگر شما هم روشی برای انجام اینکار به ذهنتون میرسه خوشحال میشیم که در بخش نظرات با ما در میان بذارید.

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

نگار مرادی

عالی بود با تشکر از مطلب مفیدتون

محمد اسفندیاری

موفق باشید دوست عزیز

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :