آخرین بازبینی: ۱۴۰۳/۰۹/۳۰

روش‌های اجرای کد جاوااسکریپت بعد از بارگزاری صفحه

هنگام بارگزاری صفحات سایت، رویدادهای(Event) مختلفی فراخوانی می‌شوند که انجام فعالیت‌های پیکربندی صفحه با استفاده از جاوااسکریپت در این زمان به انجام می‌رسد.

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

در ادامه انواع روش‌ها را به همراه نکات جانبی مربوط به هر یک بررسی می‌کنیم:

۱- window.onload

این روش ساده‌ترین شکل اجرای کدهای جاوااسکریپت است. یک نمونه کد می‌تواند به شکل زیر باشد:

window.onload = function( evt ) {
// کدهای مربوط به پیکربندی صفحه
};

window.onload = function( evt ) {

// کدهای مربوط به پیکربندی صفحه

};

این روش هنگامی که کدهای شما محدود هستند و قصد پیوست تنها یک تابع به رویداد load را دارید، گزینه‌ای آسان است.

۲- document.onload

این روش هم مشابه روش قبلی است ولی پیش از آن اجرا می‌شود. استفاده از document به جای window می‌تواند این مزیت را داشته باشد که احتمال مشاهده شدن محتوای ناقص روی صفحه کمتر می‌شود. زمانی که DOM به طور کامل پیمایش شد، این رویداد می‌تواند آن را فورا و قبل از نمایش روی صفحه، مدیریت کند. به مثال زیر توجه کنید:

document.onload = function( evt ) {
// کدها را اینجا قرار می‌دهیم
};

document.onload = function( evt ) {

// کدها را اینجا قرار می‌دهیم

};

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

۳- رویداد DOMContentLoaded

این رویداد مثل روش قبلی است با این تفاوت که فراخوانی آن با کمک توابع مدیریت رویداد در جاوااسکریپت به شکل زیر انجام می‌شود و به تعداد دلخواه می‌توانید توابع گوناگون را برای اجرا در زمان بارگزاری کامل DOM اجرا کنید:

document.addEventListener( 'DOMContentLoaded', function( evt ) {
	// کدهای شما اینجا قرار می‌گیرند
} );

document.addEventListener( 'DOMContentLoaded', function( evt ) {

// کدهای شما اینجا قرار می‌گیرند

} );

۴- قراردادن جاوااسکریپت در انتهای صفحه

یک روش ساده‌ی دیگر که ممکن است همیشه امکان‌پذیر نباشد، درج کدهای جاوااسکریپت در انتهای صفحه است:

<!doctype html>
<html lang="fa">
<head>
	<meta charset="UTF-8">
	<title>JS Load Test - ROKA</title>
</head>
<body>
	محتوای سایت
</body>
<script>
	// کدهای جاوااسکریپت اینجا قرار می‌گیرند
</script>
</html>

<!doctype html>

<head>

</head>

<body>

محتوای سایت

</body>

// کدهای جاوااسکریپت اینجا قرار می‌گیرند

</script>

</html>

۵- استفاده از جی‌کوئری

جی‌کوئری هم دو روش متداول برای اجرای کدها در اختیار شما قرار می‌دهد:

$( document ).ready( function () {
	// کدهای جاوااسکریپت
} );

// یا به طور خلاصه‌تر

jQuery( function( $ ) {
	// کدهای جاوااسکریپت
} );

$( document ).ready( function () {

// کدهای جاوااسکریپت

} );

// یا به طور خلاصه‌تر

jQuery( function( $ ) {

// کدهای جاوااسکریپت

} );

۶- استفاده از رویداد onload در html

و آخرین روش که به دلیل تداخل کدهای html و جاوااسکریپت توصیه نمی‌شود به شکل زیر است:

<!doctype html>
<html lang="fa">
<head>
	<meta charset="UTF-8">
	<title>Body Onload - ROKA</title>
</head>
<body onload="alert( 'hello' );">
</body>
</html>

<!doctype html>

<head>

<title>Body Onload - ROKA</title>

</head>

</body>

</html>

همان طور که می‌بینید، کدهای جاوااسکریپت در داخل html روی تگ body درج شده‌اند که به دلیل ایجاد تداخل در لایه‌های ظاهری و عملکردی سایت، روش خوبی به حساب نمی‌آید.

روش‌های اجرای کد جاوااسکریپت بعد از بارگزاری صفحه

۱- window.onload

۲- document.onload

۳- رویداد DOMContentLoaded

۴- قراردادن جاوااسکریپت در انتهای صفحه

۵- استفاده از جی‌کوئری

۶- استفاده از رویداد onload در html

بیشتر بخوانید:

دیدگاهتان را بنویسید لغو پاسخ