ویژگی بارگذاری HTML <img>
تعریف و استفاده
loading این ویژگی مشخص می‌کند که مرورگر باید به طور مستقیم تصاویر را بارگذاری کند یا تصاویر خارج از صفحه را به تأخیر بیندازد تا مثلاً کاربر به آن‌ها نزدیک شود.
توضیح:لطفاً فقط loading="lazy" به تصویر قرار گرفته در پایین صفحه اضافه کنید.
مثال
تصویر در پایین صفحه اصلی را با بارگذاری تأخیری اضافه کنید:
<img src="/i/photo/beijing.jpg" alt="پکن" style="width:100%"> <img src="/i/photo/shanghai.jpg" alt="شanghai" style="width:100%"> <!-- تصویر خارج از صفحه --> <img src="/i/photo/wuhan.jpg" alt="武汉" style="width:100%" loading="lazy"> <img src="/i/photo/shanghai-1.jpg" alt="上海" style="width:100%" loading="lazy"> <img src="/i/photo/shanghai-2.jpg" alt="شanghai" style="width:100%" loading="lazy"> <img src="/i/photo/shanghai-3.jpg" alt="شanghai" style="width:100%" loading="lazy"> <img src="/i/photo/tiyugongyuan.jpg" alt="پارک ورزشی" style="width:100%" loading="lazy">
نحوه نوشتن
<img src="URL" loading="eager|lazy">
مقدار خصوصیت
| مقدار | توضیح |
|---|---|
| eager | پیش‌فرض. فوراً تصاویر را بارگذاری کنید. |
| lazy | تصاویر با تأخیر بارگذاری می‌شوند تا برخی شرایط برآورده شوند. |
پشتیبانی مرورگر
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 77.0 | 79.0 | 75.0 | پشتیبانی نمی‌شود | 64.0 |
