خاصية تأخير تحميل الصور (Lazy Load): بكل سهولة

خاصية تأخير تحميل الصور (Lazy Load): بكل سهولة

ما هي خاصية Lazy Loading؟

خاصية تأخير تحميل الصور Lazy Load

خاصية Lazy Loading أو تأخير تحميل الصور هي تقنية تهدف إلى تحسين سرعة تحميل الصفحات على الإنترنت. تقوم هذه الخاصية بإيقاف تحميل الصور في المتصفح حتى يصل الزائر إلى نقطة معينة في الصفحة. بمعنى آخر، يتم تحميل الصور فقط عندما يقترب الزائر منها، مما يؤدي إلى تسريع عملية تحميل الصفحة. بهذه الطريقة، لا يتم تحميل كل الصور دفعة واحدة، كما أن الزائر لا يستهلك بيانات غير ضرورية لتحميل الصور الموجودة في أسفل الصفحة التي لم يصل إليها بعد. هذه الخاصية تعتبر مفيدة بشكل خاص لأصحاب الباقات ذات السرعات الضعيفة أو المحدودة.

لماذا لا توجد شروحات حول هذه الخاصية سابقاً في المدونة؟

في السنوات الماضية، كانت خاصية Lazy Loading تعتمد على إضافات JavaScript، والتي واجهت بعض المشاكل مع معظم القوالب. غالبا ما كانت هذه الإضافات تتطلب تحميل ملفات أكبر من حجم الصور نفسها، مما جعل استخدامها عبئا ثقيلاً على أداء الموقع. لذلك، كان من الصعب العثور على إضافة واحدة فعالة تعمل مع جميع أنواع القوالب.

ماذا تغير الآن؟

الأمور تغيرت الآن بشكل كبير. فقد أصبحت خاصية Lazy Loading جزءًا من تجربة الويب القياسية، حيث تم دمجها كخط بسيط في معظم المتصفحات الحديثة. لم يعد هناك حاجة لكتابة أكواد معقدة أو تحميل مكتبات جافا سكريبت كبيرة، مما جعل تطبيق هذه الخاصية أسهل من أي وقت مضى.

كيف يمكننا استخدامها؟

لاستخدام خاصية Lazy Loading، يمكنك ببساطة إضافة جزء صغير إلى كود الصور الخاص بك كالتالي:

<img src="Image.jpg" loading="lazy" />

الجزء الذي تم تمييزه بالأحمر (loading="lazy") هو كل ما تحتاج إلى إضافته لصورك. ومعظم المتصفحات تدعم هذه الخاصية. وإذا كان المتصفح لا يدعمها، فإن الصور ستظهر أيضًا، لكن سيتم تحميلها دفعة واحدة. بمعنى آخر، هذه الخاصية توفر لك الفائدة دون أي ضرر.

تطبيق هذه الخاصية على المواضيع التي تحتوي على عدد كبير من الصور يمكن أن يسهم في تسريع تحميل تلك المواضيع بشكل ملحوظ.

سؤال يطرح نفسه: هل هناك وسيلة لتطبيقها مرة واحدة على كل الصور؟

الإجابة تعتمد مرة أخرى على نظام مكتبات JavaScript، والتي لم أكن أفضّل استخدامها من الأصل.