از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
در طول توسعه وب، ممکن است بارهایی داشته باشید که جاوا اسکریپت شما خیلی زود اجرا شده است، که می تواند منجر به خطا یا رفتار غیرمنتظره شود، زیرا ممکن است عناصر HTML که اسکریپت شما می خواهد استفاده کند هنوز به طور کامل بارگیری نشده است.
در این بایت، روش اجرای جاوا اسکریپت را بعد از آن بررسی خواهیم کرد page به طور کامل بارگذاری شده است و اطمینان حاصل می کند که همه عناصر برای تعامل آماده هستند.
چرا بعد از بارگذاری صفحه جاوا اسکریپت را اجرا کنیم؟
وقتی یک صفحه وب بارگیری می شود، آنی نیست process. مرورگر HTML را تجزیه می کند، یک Document Object Model (DOM) ایجاد می کند و سپس شروع به رندر می کند. page. اگر کد جاوا اسکریپت شما قبل از ساخته شدن کامل DOM اجرا شود، ممکن است سعی کند عناصری را که هنوز وجود ندارند دستکاری کند و منجر به خطا شود. با اجرای جاوا اسکریپت بعد از page بار، شما اطمینان حاصل کنید که همه page عناصر برای تعامل اسکریپت شما در دسترس هستند.
توجه داشته باشید: درک این نکته مهم است که اجرای جاوا اسکریپت می تواند رندر کردن را مسدود کند page. این بدان معناست که اگر یک اسکریپت سنگین در حال اجرا قبل از خود دارید page بارها، می تواند بر روی page زمان بارگذاری و تجربه کاربری
روش اجرای جاوا اسکریپت پس از بارگذاری صفحه
راه های مختلفی برای اجرای جاوا اسکریپت بعد از آن وجود دارد page بارگیری کرده است. ما را پوشش خواهیم داد DOMContentLoaded رویداد در این بخش وجود دارد، اما روش های دیگری مانند load رویداد و jQuery $(document).ready روش.
با استفاده از رویداد “DOMContentLoaded”.
این DOMContentLoaded رویداد زمانی فعال می شود که سند اولیه HTML به طور کامل بارگیری و تجزیه شده باشد، بدون اینکه منتظر بمانید تا شیوه نامه ها، تصاویر و فریم های فرعی برای اتمام بارگیری شوند. می توانید یک شنونده رویداد برای این رویداد راه اندازی کنید و کد جاوا اسکریپت شما در این شنونده رویداد پس از آماده شدن DOM اجرا می شود.
در اینجا یک مثال است:
document.addEventListener('DOMContentLoaded', function() {
// Your code here
console.log('DOM fully loaded and parsed');
});
هنگامی که این کد را اجرا می کنید، پیام “DOM به طور کامل بارگیری و تجزیه شده” را در خود خواهید دید console پس از بارگیری کامل DOM
توجه داشته باشید: این DOMContentLoaded رویداد یک ابزار بسیار مفید است، اما به خاطر داشته باشید که در اینترنت اکسپلورر پشتیبانی نمی شود 8 و نسخه های قبلی.
با استفاده از “بار” رویداد
رویداد “load” یک رویداد استاندارد DOM است که پس از اتمام بارگیری کل صفحه وب فعال می شود. این شامل تمام دارایی ها مانند تصاویر، اسکریپت ها و فایل های CSS می شود. در اینجا روش استفاده از آن آورده شده است:
window.addEventListener('load', (event) => {
console.log('The page has fully loaded');
// Your code here
});
وقتی که page به طور کامل بارگذاری شده است، console را وارد کنید page به طور کامل بارگذاری شده است، و سپس کد شما اجرا خواهد شد.
توجه داشته باشید: رویداد “بار” در مقایسه با رویداد “DOMContentLoaded” ممکن است کمی بیشتر طول بکشد، زیرا منتظر می ماند تا همه دارایی ها بارگیری شوند. اگر اسکریپت شما وابسته نیست روی سایر دارایی ها، ممکن است بخواهید به جای آن از “DOMContentLoaded” برای زمان پاسخگویی سریعتر استفاده کنید.
با استفاده از روش «$(document).ready» جی کوئری
اگر از jQuery استفاده می کنید، می توانید از آن استفاده کنید $(document).ready() روش. این روش به محض آماده شدن DOM فراخوانی می‌شود، که اگر دارایی‌های بزرگ زیادی برای بارگیری وجود داشته باشد، می‌تواند زودتر از رویداد «بار» باشد.
$(document).ready(function() {
console.log('The DOM is ready');
// Your code here
});
با این روش، console “DOM آماده است” را وارد می کند و سپس کد شما اجرا می شود.
توجه داشته باشید: jQuery یک کتابخانه محبوب است که بسیاری از جنبه های جاوا اسکریپت را ساده می کند، اما همیشه لازم نیست. اگر فقط از jQuery برای $(document).ready() روش، ممکن است بخواهید به جای آن از جاوا اسکریپت ساده برای کاهش وابستگی های پروژه خود استفاده کنید.
مقایسه روش های مختلف
هر یک از این روش ها موارد استفاده خاص خود را دارند. رویداد “DOMContentLoaded” برای اجرای جاوا اسکریپت به محض تجزیه HTML مفید است، که می تواند به طور قابل توجهی سریعتر از رویداد “load” باشد. page دارایی های بزرگی دارد با این حال، اگر جاوا اسکریپت شما بستگی دارد روی این دارایی ها، باید از رویداد “load” استفاده کنید تا مطمئن شوید که قبل از اجرای اسکریپت شما به طور کامل بارگذاری شده اند.
از سوی دیگر، جی کوئری $(document).ready() اگر قبلاً از jQuery استفاده می‌کنید و می‌خواهید یک روش ساده و سازگار با مرورگرها برای اجرای جاوا اسکریپت پس از آماده شدن DOM داشته باشید، روش انتخاب خوبی است. اما به خاطر داشته باشید که jQuery می تواند بیش از حد باشد، اگر فقط برای این کار از آن استفاده می کنید.
نتیجه
اجرای جاوا اسکریپت بعد از page بارگذاری شده یک نیاز رایج در توسعه وب است. روشی که برای انجام این کار انتخاب می کنید بستگی دارد روی نیازهای خاص شما و کتابخانه هایی که استفاده می کنید. چه رویداد «DOMContentLoaded» را انتخاب کنید، چه رویداد «load» یا jQuery $(document).ready() روش، هر کدام مزایا و معاوضه های خاص خود را دارند. درک این موارد می تواند به شما در تصمیم گیری آگاهانه برای پروژه خود کمک کند.
منتشر شده در 1402-12-31 01:58:04
