سمة تحميل <img> HTML
مثال
أضف التحميل البطيء للصور الموجودة أسفل الجزء المرئي من الصفحة:
<img src="/w3images/wedding.jpg" alt="Wedding" style="width:100%">
<img
src="/w3images/rocks.jpg" alt="Rocks" style="width:100%">
<!--
off-screen images -->
<img src="/w3images/paris.jpg" alt="Paris"
style="width:100%" loading="lazy">
<img src="/w3images/nature.jpg"
alt="Nature" style="width:100%" loading="lazy">
<img src="/w3images/underwater.jpg"
alt="Underwater" style="width:100%" loading="lazy">
<img src="/w3images/ocean.jpg"
alt="Ocean" style="width:100%" loading="lazy">
<img src="/w3images/mountainskies.jpg"
alt="Mountains" style="width:100%" loading="lazy">
التعريف والاستخدام
تحدد السمة loading
ما إذا كان يجب على المستعرض تحميل صورة على الفور أو لتأجيل تحميل الصور خارج الشاشة حتى يقوم المستخدم بالتمرير بالقرب منها على سبيل المثال.
نصيحة: أضف loading="lazy"
فقط إلى الصور الموضوعة أسفل الجزء المرئي من الصفحة.
دعم المتصفح
Attribute | |||||
---|---|---|---|---|---|
loading | 77.0 | 79.0 | 75.0 | Not Supported | 64.0 |
بناء الجملة
<img src="URL" loading="eager|lazy">
قيم السمات
Value | Description |
---|---|
eager | Default. Loads an image immediately |
lazy | Defer loading of images until some conditions are met |
❮ علامة HTML <img>