به نام خدا با عرض سلام و احترام خدمت شما عزیزان با سری دیگر از آموزش مقدماتی جاوا اسکریپت با شما هستیم امروز قصد داریم در رابطه با تفاوت بین document load و DOMContentLoaded در جاوا اسکریپت صحبت کنیم با ما همراه باشید.

برای بررسی اینکه آیا یک صفحه وب به طور کامل بارگیری شده است، از DOMContentLoaded و بارگیری رویدادها استفاده می شود. با این حال، برخی از عناصر وجود دارد که در انتخاب افراد برای یکی بر دیگری تأثیر می گذارد. بیایید نگاهی به هر دوی آنها بیندازیم و ببینیم که چگونه کار می کنند.

صفحه اصلی HTML بارگیری می شود و تجزیه آن با فعال شدن رویداد DOMContentLoaded تکمیل می شود. استایل شیت‌ها، فریم‌های فرعی، و سایر عناصر مانند عکس‌ها با این رویداد تا زمانی که بارگیری کامل نشده‌اند، به تأخیر نمی‌افتند.

هنگامی که یک صفحه به طور کامل بارگذاری شد، یک رویداد متفاوت به نام بارگذاری باید فراخوانی شود.DOMContentLoaded یک روش رایج و مناسب بجای load می باشد.

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

سینتکس

document.addEventListener("DOMContentLoaded", function(e) {
   console.log("GfG page has loaded");
});

document.addEventListener("DOMContentLoaded", function(e) {

console.log("GfG page has loaded");

});

به عنوان مثال:

<!DOCTYPE html>
<html>
<title>Difference between document load and DOMContentLoaded events in JavaScript - code-it
</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script type="text/javascript">
      document.addEventListener("DOMContentLoaded", function(e) {
         console.log(" code-it page has loaded for you");
      });
   </script>
</head>
<body style="text-align: center">
   <h3>Join one of the world’s largest online learning marketplaces.</h3>
   <br>
   <img src="https://code-it.ir/wp-content/uploads/2022/11/code-it13_aq5f.png">
</body>
</html>

<!DOCTYPE html>

<html>

<title>Difference between document load and DOMContentLoaded events in JavaScript - code-it

</title>

<head>

document.addEventListener("DOMContentLoaded", function(e) {

console.log(" code-it page has loaded for you");

});

</script>

</head>

<h3>Join one of the world’s largest online learning marketplaces.</h3>

<br>

</body>

</html>

مزایای استفاده از رویداد DOMContentLoaded عبارتند از:

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

سایر مقالات:

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

sdk چیست؟ و نحوه نصب ان در اندروید

Document Load – روش های مختلفی برای اجرای رویدادهای load استفاده می شود. این رویداد زمانی به پایان می رسد که همه عناصر صفحه وب، از جمله سلسله مراتب DOM و ویژگی های مرتبط مانند فایل های CSS و جاوا اسکریپت، تصاویر و عکس ها، و پیوندهای خارجی، بارگیری شوند. بنابراین، load event اساساً به ما کمک می‌کند تا بفهمیم چه زمانی صفحه به طور کامل بارگذاری شده است.

سینتکس

document.addEventListener("load", function(e) {
  console.log("The page has completely loaded.");
});

document.addEventListener("load", function(e) {

console.log("The page has completely loaded.");

});

load event برای شی window پس از بارگیری کامل کل صفحه وب (HTML) از جمله تمام منابع تکمیلی مانند جاوا اسکریپت، CSS و تصاویر فعال می شود. شما از تابع ()addEventListener برای ایجاد یک event listener برای مدیریت رویداد load استفاده می کنید.

از لحاظ تاریخی، ما از رویداد load برای اجرای اسکریپت ها پس از بارگیری سند استفاده کرده ایم. با این حال، موقعیت های دیگری وجود دارد که ممکن است مناسب تر باشد.

<!DOCTYPE html>
<html>
<title>Difference between document load and DOMContentLoaded events in JavaScript - code-it
</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script type="text/javascript">
      document.addEventListener("load", function(e) {
         console.log("code-it page has loaded completely for you");
      });
   </script>
</head>
<body style="text-align: center">
   <h3>Enroll now in the most popular and best rated courses at code-it.</h3>
   <br>
   <img src="https://code-it.ir/wp-content/uploads/2022/11/code-it13_aq5f.png">
</body>
</html>

<!DOCTYPE html>

<html>

<title>Difference between document load and DOMContentLoaded events in JavaScript - code-it

</title>

<head>

document.addEventListener("load", function(e) {

console.log("code-it page has loaded completely for you");

});

</script>

</head>

<h3>Enroll now in the most popular and best rated courses at code-it.</h3>

<br>

</body>

</html>

مزایای استفاده از load event

این رویداد کمک می کند تا بفهمیم هر عنصر صفحه وب چه زمانی بارگذاری شده است.

به طور کلی:

رویداد DOMContentLoaded زمانی فراخوانی می‌شود که سند اولیه HTML به‌طور کامل بارگیری و تجزیه شده باشد، بدون اینکه منتظر بمانیم تا بارگیری asset‌ها(استایل‌ها، تصاویر و فریم‌های فرعی) تمام شود. در حالی که رویداد load روی داکیومنت زمانی فراخوانی می‌شود که کل صفحه بارگیری شده باشدکه ان شامل همه استایل‌ها، تصاویر و … می باشد.

خب دوستان عزیز به پایان مقاله تفاوت بین document load و DOMContentLoaded در جاوا اسکریپت رسیدیم امید واریم برای شما مفید واقع شده باشد.

برای امتیاز به این نوشته کلیک کنید!

[کل: 1 میانگین: 5]

اشتراک‌گذاری

آموزش گیت هاب در اندروید استودیو | ساده ترین روش برای اتصال پروژه های اندروید استودیو به GitHub (قدم به قدم) نوشته قبل

پیاده سازی متغیر ها در کاتلین | آموزش مقدماتی کاتلین | درس اول نوشته بعد

علی فرجی

علی فرجی هستم، برنامه نویس جاوا اسکریپت و ریکت با بیش از 5 سال تجربه. من عاشق برنامه نویسیم و همیشه به دنبال یادگیری چیزهای جدید هستم.همچنین یکی از بنیانگذار های سایت کدایت ، یک سایت آموزش برنامه نویسی در حوزه جاوا اسکریپت، ریکت، اندروید و ... هستم. امیدوارم بتوانم با دانش و تجربه خود به سایر برنامه نویسان کمک کنم تا در این زمینه پیشرفت کنند.