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

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

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

DOMContentLoaded نیز یک روش استاندارد از پیش تعریف شده هست که می‌تونه جایگزین خوبی برای [ltr]$(document).ready[/ltr] باشه که حدود 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/ گرفته شده است.

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

 
ارسال دیدگاه
ما همه سوالات و دیدگاه ها رو می خونیم و پاسخ میدیم
۲ دیدگاه
نگار مرادی ۱۱ تیر ۱۳۹۷، ۱۳:۵۳
عالی بود با تشکر از مطلب مفیدتون
محمد اسفندیاری ۱۵ تیر ۱۳۹۷، ۱۶:۲۵
موفق باشید دوست عزیز