معرفی
در این مقاله قصد داریم نحوه بارگذاری فیلم های Html را با تنبلی بررسی کنیم.
مراحلی که پوشش خواهیم داد:
-
بارگذاری تنبل به چه معناست؟
-
نمونه هایی از بارگذاری تنبل
-
کد برای جلوگیری از بارگذاری از قبل
-
نحوه سفارشی کردن تصویر کوچک ویدیو تا زمانی که کاربر شروع به پخش کند.
-
بارگیری تنبل رایگان کتابخانه های جاوا اسکریپت که باید امتحان کنید.
بارگذاری تنبل به چه معناست؟
بارگذاری تنبل (همچنین به عنوان بارگیری ناهمزمان یا بر اساس تقاضا شناخته می شود) یک تکنیک بهینه سازی است که بیشتر در طراحی وب و توسعه وب استفاده می شود که به موجب آن مرورگر منابع خاصی را درخواست نمی کند تا زمانی که کاربر به گونه ای تعامل کند که منابع مورد نیاز باشد.
ممکن است از خود بپرسید، “این بارگذاری تنبل چگونه وب سایت من را بهبود می بخشد؟” یا “چرا اصلاً باید بارگذاری تنبل را در وب سایت خود پیاده کنم؟”🤔. در زیر به این سوالات در مورد مزایای بارگذاری تنبل پاسخ داده شده است:
-
بارگذاری تنبل عملکرد را بهبود می بخشد:
بارگذاری تنبل عملکرد را بهبود می بخشد، و من توضیح خواهم داد که چرا عملکرد وب سایت بسیار مهم است. سرعتی که یک مرورگر با آن می تواند یک صفحه وب کاملاً کاربردی را از یک سایت معین بارگذاری کند، عملکرد یا عملکرد وب سایت نامیده می شود.
موفقیت هر سرمایه گذاری آنلاین به شدت به عملکرد بستگی دارد. سایت های با عملکرد ضعیف کاربران را از خود دور می کنند، در حالی که سایت های با عملکرد بالا آنها را درگیر کرده و حفظ می کنند. می توانید ببینید که چرا ممکن است مجبور شوید اکنون سایت خود را با تنبلی بارگذاری کنید.
-
بهبود سئو:
در صورت تاخیر در بارگذاری صفحه، موتورهای جستجو نمی توانند کل صفحه وب را بخزند. این به سادگی به این معنی است که یک تاخیر وجود خواهد داشت و رتبه بندی در بالای صفحه ظاهر نمی شود. اینجاست که بارگذاری تنبل مفید است و اطمینان حاصل می کند که مهم ترین محتوا ابتدا نمایش داده می شود و در نتیجه رتبه وب سایت شما را بهبود می بخشد.
همچنین می توانید پیوندهایی به محتوای بارگذاری شده تنبل ارائه دهید تا حتی اگر کل محتوا بارگذاری نشده باشد، با پیوندهای ارائه شده، کاربر همچنان بتواند به داده های مورد نظر خود دسترسی داشته باشد.
به یاد دارید که چگونه بارگذاری تنبل را تعریف کردیم؟ توضیح دادم: «تا زمانی که کاربر به گونه‌ای تعامل نکند که منابع مورد نیاز باشد، مرورگر منابع خاصی را درخواست نخواهد کرد». این تعریف از بارگذاری تنبل با سناریوی بالا کاملاً نشان داده شده است.
نمونه ای از بارگذاری تنبل
این بخش از مقاله به نمونه هایی از بارگذاری تنبلی ویدیو می پردازد، اما از آنجایی که تمرکز این مقاله بر بارگذاری تنبلی ویدیو است، این مثال را فقط به بارگذاری تنبلی ویدیو محدود می کنم. اگر می خواهید یاد بگیرید که چگونه انواع دیگر محتوا مانند تصاویر را با تنبلی بارگذاری کنید، منبع زیر را بررسی کنید:
راهنمای کامل بارگذاری تصاویر تنبل
آیا تا به حال چنین چیزی را در یک وب سایت دیده اید؟ 👀 جایی که باید به صورت دستی روی دکمه پخش کلیک کنید قبل از اینکه مرورگر شروع به دانلود ویدیو کند. به گیف زیر نگاه کنید:
اگر چنین است، خوشحالم به اطلاع شما برسانم که بارگذاری تنبلی ویدیو در آن صفحه اجرا شده است. چرا باید خودتان روی دکمه پخش کلیک کنید؟ چرا به ویدیوها اجازه پخش خودکار نمی دهید؟ در پاراگراف زیر به این سوالات پرداخته خواهد شد.
اگرچه HTML <video> تگ به طور پیش‌فرض به مرورگر اجازه می‌دهد ویدیوی شما را از قبل بارگیری و پخش کند، پخش خودکار ویدیوی شما باعث می‌شود صفحه وب شما کندتر بارگذاری شود. به همین دلیل است که برای بارگذاری تنبل ویدیوهای خود، ما باید از پیش بارگذاری جلوگیری کنیم.
کد برای جلوگیری از بارگذاری از قبل
ویژگی preload عنصر ویدیو را می توان برای جلوگیری از بارگذاری پیش بارگذاری ویدیوهای HTML استفاده کرد. برای بارگذاری تنبل ویدیوهای خود، این دو مرحله را دنبال کنید:
مرحله 1: پیش بارگذاری را روی “none” تنظیم کنید.
مرحله 2: مطمئن شوید که ویژگی پخش خودکار تنظیم نشده باشد، در غیر این صورت مرورگر باید شروع به بارگیری ویدیو کند و preload = "none" کار نخواهد کرد.
در اینجا یک نمونه از کد است:
<!-- disable preloading -->
<video controls preload="none" width="300">
<source src="files/sample.mp4" type="video/mp4">
</video>
در اینجا مثالی از آنچه مرورگر شما باید نمایش دهد آورده شده است:
بسته به مرورگر شما، ویدیو یک ناحیه سفید یا سیاه نمایش می دهد. در مورد من، همانطور که در تصویر بالا مشاهده می شود، یک ناحیه سیاه را نشان می دهد. علاوه بر این، از نظر بصری جذاب نیست، که ممکن است به تعامل کم کاربر منجر شود. بنابراین، چگونه به این موضوع رسیدگی کنیم؟ Html به ما اجازه می دهد تا تصاویر کوچک خود را سفارشی کنیم و از آنها به عنوان پیش نمایش ویدیو استفاده کنیم (که منجر به تعامل بهتر کاربر می شود).
نحوه سفارشی کردن تصویر کوچک ویدیو تا زمانی که کاربر شروع به پخش کند
برای سفارشی کردن تصاویر کوچک ویدیو، ویژگی پوستر به عنصر ویدیو یک مکان نگهدار می دهد که تا زمانی که کاربر شروع به پخش کند، فضا را اشغال می کند. در هر صورت، نگران نباشید که چه اتفاقی برای نماد “بازی” می افتد. مرورگر خود نماد “play” را در مرکز تصویر قرار می دهد.
پوستر را به صورت تصویر کوچک نشان دهید
-
برای نشان دادن پوستر به عنوان تصویر کوچک، قطعه کد و نتیجه زیر را بررسی کنید:
<video controls preload="none" poster="img/cover.jpg" width="300"> <source src="files/sample.mp4" type="video/mp4"> </video>
برای دستیابی به نتیجه مشابه تصویر بالا، توصیه می کنم از یک تصویر کوچک به اندازه ویدیو استفاده کنید.
بارگیری تنبل رایگان کتابخانه های جاوا اسکریپت که باید امتحان کنید
کتابخانه های JS شامل توابع مختلف (یا خطوط کد) برای انجام وظایف خاص در یک صفحه وب هستند.
شما می توانید از این کتابخانه های جاوا اسکریپت با بارگذاری تنبل رایگان برای صرفه جویی در زمان و کاهش حجم کار برنامه نویسی خود استفاده کنید.
نتیجه
در این مقاله، من با توضیح اینکه بارگذاری تنبل چیست، شروع کردم و به دنبال آن نمونه هایی از بارگذاری تنبل را توضیح دادم، آن را به بارگذاری تنبل ویدیو محدود کردم و منبعی برای کسانی که ممکن است بخواهند یاد بگیرند که چگونه انواع دیگر محتوا را با تنبلی بارگذاری کنند، ارائه دادم. سپس در مورد کد جلوگیری از بارگذاری اولیه و نحوه سفارشی کردن تصاویر کوچک ویدیو تا زمانی که کاربر شروع به پخش کند صحبت کردیم. در نهایت، چند کتابخانه جاوا اسکریپت با بارگذاری تنبل رایگان را بررسی کردیم که باید آنها را امتحان کنید.
