ما هي خاصية Lazy Loading ؟
هي خاصية تقوم على ايقاف تحميل الصور في المتصفح ولا يتم تحميلها إلا عندما يصل اليها الزائر مما يجعل تحميل الصفحة أسرع لانه لا يتم تحميل كل الصور دفعه واحده ايضاً الزائر لا يحمل إلا الصور التي مر عليها فقط ولا يحمل الصور التي بنهاية الصفحة ان لم يصل لها فهذا موفر لأصحاب الباقات وسرعات الإنترنت الضعيفة
لماذا لا يوجد شروحات حول تلك الخاصية سابقاً في كن مدون؟
هذه الخاصة لها سنوات طويلة وكانت معتمده على اضافات JavaScript وكانت مشكلتها انها لا تنجح مع معظم القوالب اضافة قد يكون ما تعتمد من ملفات أكبر حتى من حجم الصور التي سيتم اخفائها فكانت في رأيي عبئ كبير ويصعب إيجاد إضافة واحده فعالة تعمل مع الجميع
ماذا تغير الآن ؟
اصبحت الآن الإضافة جزء من تجربة الويب وأصبحت سطر بسيط جداً لأن أغلب المتصفحات بدأت اعتمادها كجزء برمجي متعارف عليه فلم يعد هناك داعي لكتابة اكواد ووضع مكتبات جافا سكريبت كبيرة الخ
كيف يمكن ان نستخدمها؟
هذا هو الكود الطبيعي للصور
<img src="Image.jpg" loading="lazy" />
الجزء المعلم بالأحمر هو فقط ما تضيفه لصورك لا اكثر من ذلك ومعظم المتصفحات اصبحت تدعمها والمتصفح الذي لا يدعمها لا تسبب مشكلة معه لانها ليست كالإضافات السابقة التي ان لم يدعمها المتصفح لا تظهر الصور أصلاً لكن هذه لو لم يدعمها المتصفح ما تزال الصور ستظهر لكن دفعة واحده فهي فائدة بدون ضرر
طبقها على مواضيعك التي تحتوي صور كثيرة سيسرع هذا المواضيع
سؤال يطرح نفسه هل هناك وسيلة لتطبيقها مرة واحده على كل الصور؟
الإجابة ستعود مرة أخرى لنظام مكتبات الجفاسكريت والتي لم افضلها من الأصل
0 تعليقات