این پست در اصل در letsusetech.com منتشر شده است.
تصاویر بارگذاری ضعیف می توانند تجربه مرور ناخوشایندی را در وب سایت شما ایجاد کنند. نه تنها نگاه کردن به آن دردناک است، بلکه باعث می شود وب سایت احساس کندی کند (حتی وقتی همه چیز ممکن است سریع باشد).
با اجرای بارگذاری تنبل روی تصاویر، می توانید تصاویر خود را بهینه کنید و آنها را سریعتر بارگذاری کنید. سپس می توانید از CSS و جاوا اسکریپت برای ایجاد یک فرآیند رندر تصویر صاف مانند آنچه در GIF زیر نشان داده شده است استفاده کنید:
برای یادگیری نحوه پیاده سازی به ادامه مطلب بروید بارگیری تنبل پیشرفته تکنیک هایی روی تصاویر شما برای عملکرد بهینه و تجربه کاربری.
نحوه بارگیری تصاویر در وب سایت ها به طور پیش فرض
به طور پیش فرض، مرورگر کار خوبی در رندر کردن تصاویر انجام نمی دهد. هنگام بارگیری یک تصویر، یک صفحه خالی را نشان می دهد. این ممکن است بازدید کننده را گیج کند و فکر کند که هیچ اتفاقی نمی افتد.
حال، به برخی از تظاهرات.
یک پوشه خالی در رایانه خود ایجاد کنید. در داخل این پوشه، فایلی به نام ایجاد کنید index.html، فایل را با یک ویرایشگر متن باز کنید و نشانه گذاری زیر را قرار دهید:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="grid">
<img src="./images/img-1.jpg" alt="">
<img src="./images/img-2.jpg" alt="">
<img src="./images/img-3.jpg" alt="">
<img src="./images/img-4.jpg" alt="">
<!-- Add 12 more images to make 16 in total -->
</div>
</body>
</html>
شانزده تصویر در داخل وجود دارد <div> عنصر (ظرف). برای استایل دادن به ظرف به صورت طرح بندی شبکه ای، a ایجاد کنید style.css فایل و کد زیر را وارد کنید:
body {
margin: 0;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
img {
width: 100%;
aspect-ratio: 1/1;
display: block;
}
اگر فایل را ذخیره کنید و باز کنید index.html در مرورگر وب خود، باید شبکه ای از تصاویر را پیدا کنید.
وقتی صفحه را به‌روزرسانی می‌کنید، تصاویر تقریباً بلافاصله بارگیری می‌شوند. این مورد در صورتی است که از اتصال اینترنت سریع استفاده می کنید (به علاوه اینکه تصاویر را به صورت محلی بارگذاری می کنید).
اما اگر قرار بود وارد آن شوید شبکه تب (در Devtool)، را فعال کنید 3G کند اتصال، و صفحه را بازخوانی کنید، متوجه خواهید شد که بارگذاری تصاویر بیشتر طول می کشد. مرورگر همچنین یک پس‌زمینه سفید را هنگام بارگیری تصویر ارائه می‌کند:
این به این دلیل است که مرورگر همه 16 تصویر را به یکباره دانلود کرده است. بارگیری تمام شانزده تصویر بی نیاز و ناکارآمد است زیرا مرورگر تنها می تواند چهار (یا شاید شش) تصویر را در یک زمان در صفحه شما نشان دهد.
این فرآیند رندر تصویر را کند می کند، به همین دلیل است که باید آن را اعمال کنید تکنیک بارگذاری تنبل.
اجرای بارگذاری تنبل اولیه روی تصاویر
بارگذاری تنبل به این معنی است که شما فقط تصاویری را که می توانید ببینید بارگیری می کنید و با اسکرول کردن صفحه به پایین، مرورگر شروع به بارگذاری تصاویر بیشتر و بیشتری می کند. به عبارت دیگر، شما در حال بارگذاری تصاویر هستید “بر اساس تقاضا”.
برو به همه <img> در نشانه گذاری خود تگ کنید و آن را اضافه کنید loading = lazy نسبت به هر یک از آنها; مثل این:
<div class="grid">
<img src="./images/img-1.jpg" alt="" loading="lazy">
<!-- Do the same for the other 15 images -->
</div>
حالا اگر رفرش کنید و بررسی کنید شبکه باز هم متوجه می‌شوید که مرورگر فقط بین شش تا ده عکس از شانزده عکس را دانلود می‌کند.
اما همانطور که صفحه را به پایین اسکرول می کنید، مرورگر تصاویر بیشتری را دانلود می کند و به تصاویری که قبلا دانلود کرده است اضافه می کند. به این ترتیب، تصاویر را فقط زمانی دانلود می کند که بخواهند روی صفحه نمایش داده شوند.
اما بارگذاری تنبل به تنهایی مشکل را حل نمی کند
بله، مرورگر به لطف بارگذاری تنبل تصاویر کمتری را دانلود می کند. اما تصاویر همچنان به کندی در شبکه های کند بارگذاری می شوند و مرورگر در ابتدا یک پس زمینه سفید غول پیکر را به جای تصاویر نشان می دهد (که دیدن آن خوب نیست).
راه حل همه این مسائل انجام بارگذاری تنبل به روشی پیشرفته تر است. به‌جای رندر تصادفی، می‌خواهید تصاویر پس‌زمینه‌ای تار داشته باشند تا زمانی که مرورگر آنها را به‌طور کامل رندر کند.
با رندر اولیه یک نسخه تار از تصاویر، بازدیدکنندگان به راحتی می توانند بفهمند که مرورگر در تلاش است تصاویر را در آنجا رندر کند. این بسیار بهتر از صفحه سفید و خالی است که به طور پیش فرض نشان می دهد.
بارگیری تار پیشرفته
شما باید یک نسخه تار از تصاویر خود ایجاد کنید. سپس باید به مرورگر بگویید که نسخه تار را نشان دهد تا زمانی که تصاویر واقعی قابل مشاهده باشند.
اولین کاری که باید انجام دهید این است که یک نسخه فوق العاده کوچک از تمام تصاویری که در صفحه رندر می کنید ایجاد کنید. می توانید از هر ویرایشگر تصویری در رایانه خود برای کوچک کردن اندازه هر تصویر یا یک ویرایشگر عکس آنلاین استفاده کنید.
بعد، داخل index.html، ایجاد کنید <div> عنصر با کلاس blur-mode برای هر تصویر پس از آن، تصویر را به قسمت منتقل کنید <div>. شما باید نسخه کوچک هر تصویر را به عنوان تصویر پس زمینه والدین تنظیم کنید <div>:
<div class="grid">
<div class="blur-mode" style="background-image: url(images/img-1-small.jpg)">
<img src="images/img-1.jpg" alt="" loading="lazy">
</div>
<!-- Do the same for the other 15 images -->
</div>
برای محو کردن تصویر پس‌زمینه، باید سبک‌های زیر را در فایل شیوه نامه اضافه کنید:
img {
/* Other CSS */
object-position: center;
object-fit: cover;
}
.blur-mode {
background-size: cover;
background-position: center;
}
اگر تغییر دادید src روی یک <img> تگ به تصویری که وجود ندارد، نسخه تار ظاهر می شود:
یکی از مزایای استفاده از این روش این است که نسخه کوچک شده ای که در ابتدا بارگیری می کنید بسیار کوچک است، بنابراین به منابع مرورگر نمی خورد.
از جاوا اسکریپت برای رندر کردن تصاویر فقط در صورت مشاهده استفاده کنید
اکنون ممکن است فکر کنید که این برای رسیدن به آنچه می خواهید کافی است، اما اینطور نیست.
بله، تصاویر تار در اتصالات کند نشان داده می شوند. اما تصاویر واقعی هنوز از بالا به پایین بارگیری می شوند (و این اصلاً خوب به نظر نمی رسد).
کاری که باید انجام دهید این است که تصویر را مخفی کنید و تنها زمانی آن را رندر کنید که مرورگر آن را به طور کامل دانلود کرده باشد. برای انجام این کار، باید مقداری جاوا اسکریپت بنویسیم.
ایجاد یک script.js داخل پوشه وب سایت خود فایل کنید و کد زیر را وارد کنید:
const blurDivs = document.querySelectorAll(".blur-mode")
blurDivs.forEach((div) => {
const img = div.querySelector("img")
function loaded() {
div.classList.add("loaded")
}
if(img.complete) {
loaded()
} else {
img.addEventListener("load", loaded)
}
})
با کد بالا به تمام تصاویر دسترسی پیدا کردید و با آن تماس گرفتید loaded() پس از اینکه مرورگر آن را به طور کامل دانلود کرد، روی هر تصویر عمل کنید.
این loaded() تابع را اضافه می کند .loaded کلاس به تصویر، در نتیجه آن را در صفحه نمایش می دهد.
این سبک مرتبط با .loaded کلاس در style.css:
.blur-mode.loaded > img {
opacity: 1;
transition: opacity 200ms ease-in-out;
}
.blur-mode > img {
opacity: 0;
}
با تنظیم اولیه opacity به 0، می توانید به آرامی تصویر خود را هنگامی که به طور کامل در مرورگر بارگذاری می شود در صفحه محو کنید. این همان کاری است که ما در اولین بلوک CSS در بالا انجام دادیم.
افزودن انیمیشن CSS
آخرین کاری که می توانید انجام دهید اضافه کردن یک انیمیشن است که نشان می دهد تصویر در حال بارگذاری است:
.blur-mode::before {
content: "";
position: absolute;
inset: 0;
animation: pulse 2.5s infinite;
}
در اینجا شما در حال تنظیم یک انیمیشن پالسی هستید که در حالی که تصویر هنوز در حال بارگذاری است، بی نهایت اجرا می شود. در اینجا تعریف فریم کلیدی است:
@keyframes pulse {
0% {
background-color: rgba(255, 255, 255, 0)
}
50% {
background-color: rgba(255, 255, 255, 0.1)
}
100% {
background-color: rgba(255, 255, 255, 0)
}
}
انیمیشن پالس تا زمانی که تصویر هنوز توسط مرورگر بارگذاری می شود فعال است. این انیمیشن به نظر می رسد که چیزها در حال دانلود هستند.
فراموش نکنید که وقتی تصویر به طور کامل در صفحه بارگذاری شد، انیمیشن را حذف کنید:
.blur-mode.loaded::before {
content: none;
}
حال اگر سرعت شبکه خود را به a کاهش دهید 3G سریع و صفحه خود را بازخوانی کنید، متوجه خواهید شد که مرورگر آن بارگذاری تصاویر را از بالا به پایین به شما نمی دهد. در عوض، قبل از محو شدن، منتظر می ماند تا کل تصویر دانلود شود.
این یک GIF است که نتیجه را نشان می دهد:
نتیجه
اکنون می‌دانید که چگونه بارگذاری تنبل پیشرفته را روی تصاویر خود پیاده‌سازی کنید، همه چیزهایی را که برای ایجاد یک تجربه رندر تصویر روان برای کاربران خود نیاز دارید، در اختیار دارید.
از پیگیری شما متشکرم و هفته خوبی داشته باشید.
