تعرف انك تقدر تعمل Lazy Load للصور باستخدام ال HTML فقط

معلومة سريعة ..
تعرف انك تقدر تعمل Lazy Load للصور باستخدام ال HTML فقط! بدون أي مكتبة لل js 
------
اللي ميعرفش أيه هو ال Lazy Load .. 
من أسمه Lazy يعني كسول ..
يعني من الآخر بدل م تحمل كل الصور اللي موجودة في صفحة الويب مرة واحدة ..
بتقول للصور متحمليش غير لما المستخدم يقرب منك .. يعني مثلاً لو الصورة في نص الصفحة ..
والمستخدم لسة في أول الصفحة مش هتحمل .. لكن لما يقرب من نص الصفحة بتبدأ الصور اللي ف النص تحمل .
وبكدا يبقى الصفحة كلها حملت بسرعة .. ومش شرط تكون حملت كلها .. وفي نفس الوقت الصور اللي المستخدم موصللهاش محملتش أساساً طالما هو مجاش عندها ..
------
الناس اللي عارفة التقنية كانت بتضيع وقت كبير في البحث عن package لل lazy load ..
النهادرة أنا جاي أقولك على طريقة Native ..
يعني هتعمل الحوار دا ب Pure HTML بدون م تكتب أي حاجة بالجافا سكريبت ..
كل اللي هتعمله هتضيف الخاصية اللي اسمها loading="lazy"
بحيث تكون بالشكل دا ..

<img src="" loading="lazy" />


أو حتى ال Iframe 

<iframe src="" loading="lazy"></iframe>


وشكراً ع كدا .. هيعمل LazyLoad Pure ..
متنساش تتابع هاش تاج
#نصائح_مطوري_الويب
هتلاقي عليه تركات من دي كتير ..
أو تقدر تلاقيها في المدونة هتلاقي كلها تركات في تركات ..
https://peterayoub.me/blog


مهندس حاسبات وذكاء اصطناعي، مؤسس منصة نفذلي.

شاركنا رأيك

بريدك الالكتروني لن يتم نشره.