اجرای کد جی کوئری پس از لود DOM

Ratings
(0)

موضوع: اجرای کدهای جی کوئری پس از لود DOM و قبل از لود کامل صفحه

در کدهای پیشرفته، پس از اینکه DOM به طور کامل لود شد، کدهای جاوا اسکریپت اجرا می شوند. زیرا هر کاری که بخواهیم با DOM انجام دهیم، باید DOM از قبل لود شده باشد. لازم است بدانیم که مرورگر، چه زمانی فایل های ضروری مثل تصاویر را کاملاً لود کرده است. 

برای این کار، اگر بخواهیم از رویداد window.onload استفاده کنیم، باید تمام کدهای سند، که شامل تمام فایل های ضروری نیز می شود، قبل از اینکه رویداد مذکور فراخوانی شود، کاملا لود شده باشند. ما فقط می خواهیم زمان لود شدن فایل های ضروری را بدانیم، نه وقتی که کل صفحه لود شد. پس این رویداد به در ما نمی خورد. بنابراین به رویدادی نیاز داریم که به ما نشان دهد چه موقع DOM به تنهایی لود شده است و آماده ی استفاده(ready) است.

به طور خلاصه می توان گفت که رویداد onload نیاز ما را برطرف نمی کند، چون این رویداد وقتی اجرا می شود که همه ی صفحه لود شده باشد، پس ما به رویدادی احتیاج داریم که وقتی فقط DOM و نه بقیه ی صفحه، لود شد به ما اطلاع بدهد.

راه حل مسئله

برای حل این مشکل، جی کوئری یک متد به نام ()ready به ما ارائه داده است که در حقیقت یک شنونده ی رویداد شخصی سازی شده است که محدود به شیء DOM صفحه می باشد. متد ()ready تنها یک تابع را بعنوان پارامتر می پذیرد. و در درون این تابع، کدهای جاوا اسکریپت را قرار می دهیم،  که وقتی DOM آماده شد، اجرا شوند.  در زیر یک مثال در مورد کاربرد این رویداد آورده شده است. که وقتی DOM آماده(ready) شد و صفحه هنوز کاملا لود نشده است، یک پنجره ی ()alert را باز می کند. 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
   jQuery(document).ready(function(){
     alert(jQuery('p').text());
   });
  </script>
 </head>
 <body>
  <p>The DOM is ready!</p>
 </body>
</html>

 شنونده ی رویداد()ready یک جایگزین برای رویداد window.onload در جاوا اسکریپت است. و می توانیم هرچقدر که بخواهیم از آن استفاده کنیم. وقتی که از این رویداد استفاده می کنیم توصیه می شود که آن را در صفحه ی وب، پس از کدهای تعریف برگه های استایل و includeها قرار دهیم. با انجام این کار، اطمینان حاصل می کنیم که تمام ویژگی های سی اس اس عناصر، قبل از اینکه کدهای جی کوئری یا جاوا اسکریپت توسط رویداد ready اجرا شوند، به درستی تعریف شده اند.  علاوه بر آنچه گفته شد، تابع jQuery خودش به تنهایی یک راه خلاصه را برای استفاده از رویداد ready به ما ارائه می دهد.

 بدون این روش، مثال بالا به صورت زیر نوشته می شود:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    jQuery(function(){ // استفاده شود ready لود نشده است باید از رویداد DOM
      alert(jQuery('p').text());
    });
  </script>
 </head>
 <body>
  <p>The DOM is ready!</p>
 </body>
</html>

 استفاده از رویداد ready تنها وقتی ضروری است که لازم باشد کدهای جاوا اسکریپت را در داخل تگ <head> قرار دهیم. با قرار دادن تمام کدهای اکسترنال و درون خطی(inline) جاوا اسکریپت قبل از تگ بسته ی <body> می توانیم از استفاده از رویداد ()ready اجتناب کنیم. وقتی که کدهای جاوا اسکریپت در انتهای کدها قرار گیرند سرعت لود صفحه بیشتر خواهد شد. یعنی اگر کدهای جاوا اسکریپت را در انتهای صفحه قرار دهیم، مرورگر از بالا به پایین کدها را لود می کند تا به کدهای جاوا اسکریپت برسد. این کار خوب است زیرا اکثر مرورگرها تا زمانی که انجین جاوا اسکریپت، کدهای جاوا اسکریپت قرار گرفته در صفحه ی وب را کامپایل نکند، لود کردن دیگر منابع را متوقف می کنند. این درست است که در برخی مواقع قرار دادن کدهای جاوا اسکریپت در عنصر <head> ساده تر است. اما نویسنده ی کتاب تا به حال با موقعیتی روبه رو نشده است که حتما لازم باشد کدهای جاوا اسکریپت در این تگ قرار گیرند. هر مانعی که نویسنده با قرار دادن کدهای جاوا اسکریپت در پایین صفحه با آن مواجه شده است، به آسانی حل شده است. بعلاوه، وقتی که با قرار دادن کدهای جاوا اسکریپت در پایین صفحه باعث افزایش سرعت لود صفحه ی وب می شوند چرا این راه ساده را انتخاب نکنیم و کدها را به صورت پراکنده قرار دهیم؟ بنابراین اگر ما از رویداد ()ready استفاده نکنیم، انگار کدهای کمتری نوشته ایم؛ و نوشتن کدهای کمتر به افزایش سرعت صفحه منجر می شود. با این منطق، در مثال زیر از رویداد ()ready استفاده نکرده ایم.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
 </head>
 <body>
  <p>The DOM is ready!</p>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    alert(jQuery('p').text());// لود شده است DOM
  </script>
 </body>
</html>

 توجه کنید که ما تمام کدهای جاوا اسکریپت را قبل از تگ <body/> قرار داده ایم. و دیگر کدهای اضافی را باید در بالای این کدها قرار دهیم.

  • بازدید: 1144

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال